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!