如何在不同浏览器中使用 CSS 垂直旋转文本？-css教程-PHP中文网

如何在不同浏览器中使用 CSS 垂直旋转文本？

Patricia Arquette

发布： 2024-12-18 09:55:10

原创

912 人浏览过

How to Rotate Text Vertically Using CSS Across Different Browsers?

使用 CSS 垂直旋转文本

实现跨浏览器垂直文本旋转需要特定于浏览器的解决方案。对于支持CSS3变换的浏览器，可以使用rotate()。

CSS3变换：

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

登录后复制

此代码将文本逆时针旋转90度并锚定旋转到文本的中心。

过滤IE：

对于 IE 5.5 及更高版本，可以使用过滤器属性：

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

登录后复制

rotation=3 值将文本逆时针旋转 270 度。

moz 变换Firefox：

对于 Firefox 3.5 及更高版本，使用 -moz-transform：

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

登录后复制

-webkit-transform 对于 Safari/Webkit：

对于 Safari 和 Webkit 浏览器，-webkit-transform 是使用：

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

登录后复制

浏览器支持：

这些解决方案为 IE6、Firefox 2、Chrome、Safari 和 Opera 中的垂直文本旋转提供跨浏览器支持。

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