如何使用CSS跨瀏覽器繪制垂直文本？我希望將單個文字旋轉90度，使用跨瀏覽器（> = IE6，> = Firefox 2，任何版本的Chrome，Safari或Opera）支持。如何才能做到這一點？
3 回答
守著星空守著你
TA貢獻1799條經驗 獲得超8個贊
使用最新信息（來自CSS技巧）更新了此答案。感謝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);}老答案：
對于FF 3.5或Safari / Webkit 3.1，請查看：-moz-transform（和-webkit-transform）。IE有一個Matrix過濾器（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... */}
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
我使用以下代碼在頁面中寫入垂直文本。Firefox 3.5 +，webkit，opera 10.5+和IE
.rot-neg-90 {
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}- 3 回答
- 0 關注
- 623 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消