I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
用最近的信息更新了这个答案(CSS Tricks).感谢Matt和Douglas指出了过滤器的实现.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Old answer:个
对于FF 3.5或Safari/Webkit 3.1,请查看:-moz-transform(和-Webkit转换).IE有一个Matrix filter(v5.5+),但我不确定如何使用它.Opera还没有转换功能.
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}