How to Rotate Text Vertically Using CSS Across Different Browsers?

Rotating Text Vertically with CSS

Achieving cross-browser vertical text rotation requires browser-specific solutions. For browsers supporting CSS3 transforms, rotate() can be used.

CSS3 Transform:

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

This code rotates the text by 90 degrees counterclockwise and anchors the rotation to the center of the text.

Filter for IE:

For IE versions 5.5 and later, the filter property can be used:

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

The rotation=3 value rotates the text by 270 degrees counterclockwise.

moz-transform for Firefox:

For Firefox 3.5 and later, -moz-transform is used:

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

-webkit-transform for Safari/Webkit:

For Safari and Webkit browsers, -webkit-transform is used:

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

Browser Support:

These solutions provide cross-browser support for vertical text rotation in IE6 , Firefox 2 , Chrome, Safari, and Opera.

The above is the detailed content of How to Rotate Text Vertically Using CSS Across Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!