How Can I Vertically Rotate Text with Cross-Browser Compatibility?

Rotating Text Vertically with Cross-Browser Support

Need to display a single word vertically? This can be achieved with CSS, ensuring compatibility across major browsers such as IE6, Firefox 2, and Chrome.

Solution:

To rotate text 90 degrees using CSS, follow these steps:

1. Define a class with the desired CSS transformations:

.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}

2. Apply the class to the desired text:

<span>

For Older Browsers:

In older browsers, you can use the following code for matrix transform:

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

This will rotate the text -90 degrees in Firefox 3.5 and Safari/WebKit 3.1. IE has limited matrix support, but it's more complex to implement.

The above is the detailed content of How Can I Vertically Rotate Text with Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!