Home >Web Front-end >CSS Tutorial >How Can I Achieve Cross-Browser Vertical Text Rotation with CSS?
Cross-Browser Vertical Text Rotation using CSS
Background
Many modern websites incorporate dynamic content, including rotated text. However, achieving consistent vertical text across browsers has presented a challenge.
Solution
To rotate a word 90 degrees, leverage the 'transform' property:
.rotate { transform: rotate(-90deg); transform-origin: 50% 50%; }
Browser Compatibility
This approach supports major browsers:
Note
IE versions prior to 9 require applying a filter property:
.rotate { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
For Firefox (≥3.5) and Webkit (≥3.1), consider '-moz-transform' and '-webkit-transform', respectively.
Conclusion
The provided CSS techniques allow for cross-browser vertical text rotation, enabling efficient and consistent content presentation.
The above is the detailed content of How Can I Achieve Cross-Browser Vertical Text Rotation with CSS?. For more information, please follow other related articles on the PHP Chinese website!