Home >Web Front-end >CSS Tutorial >How Can I Achieve Cross-Browser Vertical Text Rotation with CSS?

How Can I Achieve Cross-Browser Vertical Text Rotation with CSS?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-15 05:22:09664browse

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:

  • Chrome (any version)
  • Firefox (≥2)
  • Safari (≥3.1)
  • Opera (≥5)
  • IE (≥9)

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn