How to Achieve Cross-Browser Vertical Text with CSS?

Cross-Browser Vertical Text using CSS

Query: How can text be rotated vertically to a 90-degree angle, ensuring compatibility across various browsers (IE6 , Firefox 2 , Chrome, Safari, Opera)?

Solution:

The latest advancements include CSS3's -webkit-transform, -moz-transform, and transform properties. Their syntax is:

transform: rotate(-90deg);
transform-origin: 50% 50%;

For older browsers, the legacy IE filter can be employed via:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Additionally, for Firefox 3.5 or later and WebKit/Safari 3.1 or later, the -moz-transform and -webkit-transform properties can be utilized:

-moz-transform: rotate(270deg); /* Use 270 degrees for negative angle */
-moz-transform-origin: 50% 50%;

-webkit-transform: rotate(270deg); /* Use 270 degrees for negative angle */
-webkit-transform-origin: 50% 50%;

The above is the detailed content of How to Achieve Cross-Browser Vertical Text with CSS?. For more information, please follow other related articles on the PHP Chinese website!