如何垂直旋转文本并兼容跨浏览器？-css教程-PHP中文网

如何垂直旋转文本并兼容跨浏览器？

Linda Hamilton

发布： 2024-12-09 22:44:11

原创

1008 人浏览过

How Can I Vertically Rotate Text with Cross-Browser Compatibility?

跨浏览器支持垂直旋转文本

需要垂直显示单个单词？这可以通过 CSS 来实现，确保跨主流浏览器（如 IE6、Firefox 2 和 Chrome）的兼容性。

解决方案：

使用 CSS 将文本旋转 90 度，请按照以下步骤操作：

使用所需的 CSS 定义一个类转换：

.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}

登录后复制

将类应用于所需的文本：

<span>

登录后复制

对于较旧的浏览器：

在旧版浏览器中，您可以使用以下矩阵代码变换：

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

登录后复制

这会将 Firefox 3.5 和 Safari/WebKit 3.1 中的文本旋转 -90 度。 IE 对矩阵的支持有限，但实现起来比较复杂。

以上是如何垂直旋转文本并兼容跨浏览器？的详细内容。更多信息请关注PHP中文网其他相关文章！