如何使用CSS跨浏览器绘制垂直文本？ [英] How can I draw vertical text with CSS cross-browser?

问题描述

我想将文字的一个字旋转90度，使用跨浏览器（> = IE6，> = Firefox 2，任何版本的Chrome，Safari或Opera）支持。

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 ）。 Kudos to Matt and Douglas for pointing out the filter implementation。

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.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具有矩阵过滤器（v5.5 +），但我不知道如何使用它。

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.

.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... */
}

这篇关于如何使用CSS跨浏览器绘制垂直文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！