文本旋转 | CSS-Tricks

如果您正在寻找一种垂直设置文本的方法，最好的选择可能是 CSS writing-mode。

如果您只是想旋转一些文本，您可以像这样旋转整个元素，这会将其逆时针旋转90度

.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Internet Explorer 的 BasicImage 过滤器中的 rotation 属性可以接受四个值之一：0、1、2 或 3，它们将分别将元素旋转 0、90、180 或 270 度。

另请参阅这篇关于侧向标题的博客文章。

查看 Chris Coyier 的 CodePen 上的笔
侧向标题 (@chriscoyier)
在 CodePen 上。

查看 Graham Clark 的 CodePen 上的笔
侧向标题旋转 (@Cheesetoast)
在 CodePen 上。

Sean Hood

# 2009年9月3日

我可以在 IE 中将某个东西旋转 5 或 10 度吗？

Kirill

评论永久链接# 2009年9月4日

可以，但是您需要在 ie6 中使用 javascript。

此线程有很多相关信息。

但是，我为此使用 jQuery，因为它有一个非常好的插件。
Gijs Stegehuis

评论永久链接# 2010年5月28日

实际上，您不必为此使用 javascript 才能在 IE 中工作，您可以使用 IE 的矩阵过滤器！
Mottie

评论永久链接# 2011年12月29日

糟糕，我本想在这里添加我的评论……但它在底部。基本上，我建议使用 CSS3Please。
Tsanyo Tsanev

评论永久链接# 2012年5月22日

是的，你可以。要获得 10 度旋转，只需使用 10*1/90，大约为 0.11
mPhuong

评论永久链接# 2012年6月5日

如何旋转 45 度？
Ryan Hidajat

评论永久链接# 2012年10月20日

我相信对于智能浏览器来说这不是什么大问题，您可以使用 CSS3 rotate，但对于落后的浏览器，您必须使用

5 度

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99, M12=-0.08, M21=0.08, M22=0.99, SizingMethod="auto expand");

m11 = sin (5 * pi / 180)
m12 = cos (5 * pi / 180)
m21 = cos (5 * pi/ 180)
m22 = sin (5 * pi / 180)

有关 IE 示例，您可以在此处查看小提琴
http://jsfiddle.net/pv8sH/
Chiquito

评论永久链接# 2016年1月22日

您好，Sean Hood，回答您的问题，不可以。您不能。但是，您可以在 IE 中将某些东西旋转，比如说，7 度。这更合理。

Tameshwar

# 2009年9月4日

太好了，它也适用于图像，我们可以用于圆角图像以旋转单个图像。

sushant

评论永久链接# 2011年4月30日

css 旋转在 ie 7 或 ie 7 以下版本中不起作用。

Aric

# 2010年4月27日

谢谢，这正是我需要的。

Gijs Stegehuis

# 2010年5月28日

您忘记了 Opera：-o-transform:rotate(90deg);

Sumith

# 2010年11月29日

很好！非常感谢！

Ilídio Martins

# 2010年12月20日

“Transformie 是一个 javascript 插件，大小不到 5k，您可以将其嵌入网页中，它可以通过将本机 IE 过滤器 API 映射到 Webkit 提出的 CSS 转换来为您带来 CSS 转换。”

https://github.com/pbakaus/transformie

Shea Dawson

# 2011年9月19日

嘿，Opera 也应该在那个列表中……干杯！

-o-transform: rotate(-90deg);

Mahendran

# 2011年9月21日

我不明白..

shu

# 2011年10月3日

在 IE 中无法旋转除 90/180/270 之外的其他角度吗？

yolande

# 2011年10月20日

我旋转了文本，它在 ie 中可以工作，但文本看起来模糊，而且看起来不好。有没有办法防止这种情况？

Sam Jarvis

评论永久链接# 2011年10月24日

尝试

zoom:1;
background-color: 你的颜色。

Sam Jarvis

# 2011年10月24日

一个大问题是 filter 属性非常低效。例如，在具有过滤器的元素上动画化边距或具有过滤器的子元素，在最好的机器上也极其卡顿。

最近遇到这个问题，并且确实需要一种更快的旋转文本方法，也许是 cufon。

Kenchappagoudra

# 2011年10月24日

嗨，Chris，
你能解释一下如何在谷歌浏览器中完成吗？我在我的机器上安装了 Chrome。它不适用于以上代码。

谢谢。
Kenchappagoudra

ZoltAi

# 2011年10月26日

@ SAM JARVIS
你的答案对我有用……太棒了伙计 :)))

123456789

# 2011年11月9日

ngfnfggf

我的巢穴

# 2011年11月12日

我尝试在我的示例页面 http://www.pcservices-au.com/accordion_effect.htm 中使用文本旋转。文本可以完美旋转，但我有一个问题，文本继续换行。我找不到解决方案。任何人有任何想法，我将不胜感激。您可以查看链接，并会看到我的问题。

为什么是 CSS

评论永久链接# 2011年11月23日

尝试使用
white-space:nowrap;
我的巢穴

评论永久链接# 2011年12月11日

非常感谢 Why CSS（Michael Fokken）。它工作完美。

bob

# 2011年11月15日

但它在 Internet Explorer（所有版本）中都不支持。

David

# 2011年11月16日

这些 CSS3 属性在浏览器支持方面终于取得了一些进展，这真是太好了，即使 IE 也在迎头赶上！

如果您像许多开发人员一样，发现很难记住每个细节（例如，每个浏览器的所有愚蠢的前缀版本）在涉及新的 CSS3 运算符时，那么使用网络上提供的 CSS 生成器之一可能很有用。对于转换，我经常查看 http://www.cssrotate.com

Mark

# 2011年11月25日

Chris，您的“filter: progid: …” 破坏了最新的 IE9 SP1
症状：（尚未测试 Apple……）win7-64，许多细节中的几个
从 Xweb4 预览中预览旋转没有问题，直到从浏览器中打开 html 文件
然后旋转的文本（在我们的例子中是一个小词）按 css 中编码的 10px“word”显示。
但 css 旋转的标签是一个大黑框，填充了浏览器窗口的 80%。
重新安装 IE 和 Xweb，并且浏览器触发的故障没有消失
浏览器永久损坏 windows、预览、收藏夹等相同的严重损坏
删除“filter: progid: …” 并且损坏消失了，但是最初的非损坏显示？残留物？
这需要仔细观察——希望这对您没有问题，但此页面现在很有名——哈哈
赛门铁克和我都会用钥匙孔观察 win-ie 开发团队。
大约 6 个小时后，css-tricks.com/snippets/css/text-rotation /将建议/mark ~tx
ps 开发或研究不会提供一个安全的替代方案吗？;o(

Vjoanne

# 2011年12月1日

我在我的网站上尝试了这段代码，它在IE 9中不起作用，当我从本地查看时看起来没问题，但是当我将其上传到网上时，它显示的结果与我在本地看到的不同。

你知道问题出在哪里吗？

Keith B

评论永久链接# 2012年7月5日

迟来的评论，但尝试在“filter: …”前面添加以下内容。
[if lte IE 8] 这样你的css代码行看起来像

[if lte IE 8] filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Unknow

# 2011年12月14日

不错！！谢谢 :)

aditya

# 2011年12月27日

有没有办法获取元素旋转的角度？希望有一种使用jQuery的方法。
示例
对于上面的代码，我想做类似的事情

 var angle = $(".rotate").getRotateAngle();
console.log(angle); // Should print -90

Chris Coyier

评论永久链接# 2011年12月28日

请参阅：https://css-tricks.cn/get-value-of-css-rotation-through-javascript/

Mottie

# 2011年12月29日

我认为找出旋转文本的css的最简单方法是使用CSS3Please……它甚至提供了IE矩阵过滤器，因此您不必自己计算。这是一个例子

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
      -ms-transform: rotate(7.5deg);  /* IE9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
          transform: rotate(7.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}

Param

评论永久链接# 2012年1月20日

当我尝试在IE7和IE8中使用它时，它不起作用，有什么帮助吗？

madam

# 2012年1月10日

大家好，
我制作电子书，我尝试旋转一个带有背景和内部文本的块（iBooks使用一些css3）。它运行良好，除了（对于一本书来说真是可惜！）文本会抖动，就像跟随波浪一样……有人可以帮忙吗？

这是我的css代码
{
.encadregris_turn{
font-family: “HelveticaNeue-Italic”, sans-serif;
font-size: 0.9em;
padding: 0.8em;
color: #624a30;
float: right;
width: 55%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-epub-transform: rotate(2deg);
margin-top: 1.2em;
}

Koyae

# 2012年1月26日

在这个例子中，“IE”和“Internet Explorer”有什么区别？

如果我可以省略其中一个，我真的很想这样做，因为IE6现在已经死了。

kreiven

# 2012年3月22日

有没有办法将其插入单个HTML标签中？

Filip Bech-Larsen

# 2012年6月25日

似乎在IE9中同时使用-ms前缀和filter属性会使效果加倍（旋转两倍）。对我来说，省略-ms前缀的行可以解决此问题，并且filter在IE9中也能正常工作。

Robert

# 2012年10月15日

这是一个非常好的例子。谢谢
我注意到在IE的打印模式下，文本不会以旋转的方式呈现。
有没有解决办法？

Malenky

# 2012年11月13日

我遇到的问题是IE旋转。这会旋转文本，但“Microsoft.BasicImage”将其转换为图像，从而破坏了链接。

Blaise Kal

# 2012年12月3日

这是一个简单易用的工具，可以将CSS3的transform
转换为IE过滤器：http://www.useragentman.com/IETransformsTranslator/

Aditi

# 2012年12月26日

代码运行得非常好。但是当文本很长，没有空格时，它会超出单元格的边框！！如何防止这种情况？如何根据内容调整单元格大小？

Arthur Dent

# 2013年1月18日

有人知道是否可以在epub中旋转（180度），并与Adobe Digital Editions一起使用吗？谢谢。

nick

# 2013年1月25日

感谢您的分享^^

jennifer

# 2013年5月4日

我能否只旋转一个字符？我正在文本中使用一个向上指向的箭头（↑），但如果可能的话，我想将其显示为45度角。非常感谢您的任何帮助！
:)

AJ

评论永久链接# 2013年7月15日

只需在要旋转的字符周围添加一个span，然后将.rotate类添加到span中。如果您由于某种原因无法添加span因为无法访问html，则可以使用Dave Rupert的Lettering.js

RobjH

# 2013年9月4日

效果很好，谢谢！

Matt Smith

# 2013年9月17日

很棒的文章！对于较新版本的IE，IE转换似乎不再需要，对于较新版本的Opera，-o前缀也可能不需要。

Harish

# 2013年9月29日

请建议在IE 7、8中进行45度旋转。

Patty

# 2013年12月25日

请停止将某些内容标记为“IE兼容”，而将其他内容标记为“Internet Explorer兼容”，以便将其视为2个不同的内容。
Ugh。

Nate

# 2014年1月4日

IE可以就此终结了吗！？或者完全使用webkit？说真的，我甚至不想为IE中的所有错误编写代码。

Derek

# 2014年2月25日

有人知道是否有修复程序允许在打印到PDF时渲染过滤器？IE可以很好地渲染旋转，但是如果我使用IE8或IE7，则过滤器属性在PDF打印中将无法正确渲染。谢谢

Caroline

# 2014年5月26日

谢谢！但由于某种原因，在IE9中，文本旋转了180度，并且有一个黑色背景
http://monosnap.com/image/GNYC0ztxiHW1y5LzfohBgowZUA5lGu

在IE8和其他浏览器中看起来不错
http://monosnap.com/image/cgV0mFulOBstulAvjtoBXvAeNJI8Ry

有什么建议吗？

lior

# 2014年6月10日

谢谢
这对图像也有效吗？

Farhan Islam

# 2014年12月18日

你能确认兼容性吗？即从哪个版本开始，所有这些旋转css都支持/已支持。

我相信这篇文章已经过时了，并且是针对css3中早期版本的transform。

Prabhu

# 2015年3月20日

关于Adobe数字版和IPAD是否支持旋转文本的css有什么想法。

pirulo259

# 2015年5月29日

侧标题

Rajkumar Das

# 2015年6月5日

IE8中旋转不起作用。你能告诉我问题出在哪里吗？

Beulah

# 2019年8月17日

只是一个建议……但是如果你自己从一开始就设置旋转（为0）……然后当你想要读取/编辑它时，只需使用document.style。

Ahmad Tasnim Zirman

# 2022年6月26日

好吧，现在我知道我有点晚了，但是有没有办法像这样只旋转文本的一部分，在CSS中“.om-os-btn:after{
content: ” ᐳ”;
font-size: 12px;
transform: rotate(-90deg);
}”

我真的很努力地找到合适的符号才能使其正常工作，但后来我尝试了这个，它也不起作用……

Geoff Graham

评论永久链接# 2022年6月27日

如果你想要垂直文本，可以考虑使用writing-mode。一个想法是将要旋转的文本包装在一个>span<中，然后将writing-mode设置为vertical-rl。你仍然可以走transform路线——唯一要记住的是也要设置transforn-origin来设置旋转的位置。

评论

发表评论 取消回复

发表评论取消回复