HTML、CSS、JS 中的文本旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5521952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text rotation in HTML, CSS, JS
提问by Sourav
How to rotate a text (cross browser) ? my code works in FireFox, Opera :(
如何旋转文本（跨浏览器）？我的代码适用于 FireFox、Opera :(
I WANT TO ROTATE TEXT ON IE TOO(_Rotation degree can be any degree within 15 and 60)
我想在 IE 上旋转文本（_旋转度可以是 15 和 60 之间的任何度数）
<html>
<head>
<style type="text/css">
#memo
{
width:200px;
word-wrap: break-word;
background-color:yellow;
}
</style>
</head>
<body>
<php
$deg=rand(15,60);
?>
<div id="memo" style="transform:rotate(<?php echo $deg; ?>deg); -moz-transform:rotate(<?php echo $deg; ?>deg);-webkit-transform:rotate(<?php echo $deg; ?>deg);-o-transform:rotate(<?php echo $deg; ?>deg);">Hello</div>
</body>
</html>
采纳答案by JohnP
These 3 rules will make the non IE browsers rotate.
这 3 条规则将使非 IE 浏览器旋转。
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
For IE, you could use filters. I've seen a -ms-transformsomewhere, but can't seem to find it right now.
对于 IE，您可以使用过滤器。我在-ms-transform某处看到过，但现在似乎找不到。
Filter usage : http://snook.ca/archives/html_and_css/css-text-rotation
过滤器使用：http: //snook.ca/archives/html_and_css/css-text-rotation
回答by Marcel
Seems to work OK in all modern browsers (not IE) for me.
对我来说似乎在所有现代浏览器（不是 IE）中都可以正常工作。
Demo: turi.co/up/rand_rotate
演示：turi.co/up/rand_rotate
<?php $deg=rand(15,60); ?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Random transform:rotate</title>
<style type="text/css">
#memo {
width:5em; word-wrap:break-word; margin:2em;
font:700 3em/1.2 'myriad pro', sans-serif;
transform:rotate(<?php echo $deg; ?>deg);
-o-transform:rotate(<?php echo $deg; ?>deg);
-moz-transform:rotate(<?php echo $deg; ?>deg);
-webkit-transform:rotate(<?php echo $deg; ?>deg);
}
</style>
</head>
<body>
<div id="memo">Hello</div>
</body>
</html>
回答by danidacar
http://snook.ca/archives/html_and_css/css-text-rotation
http://snook.ca/archives/html_and_css/css-text-rotation
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); For Opera -> -o-transform support in 10.50 For IE -> filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
To rotate 45 in IE
在 IE 中旋转 45
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
回答by Hussein
Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers
使用优秀的 jQuery Rotate 插件。http://code.google.com/p/jqueryrotate/。所有主要浏览器都支持它
* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome
To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotationWhere #myImageis the id of the element you want rotated.
要旋转图像，您需要做的就是您要旋转的元素的 id$('#myImage').rotate(30) //for a 30 degree rotation在哪里#myImage。
If all you want to do is rotate text vertically, you can use simple CSS without much effort.
如果您只想垂直旋转文本，则可以毫不费力地使用简单的 CSS。
<h1 id="heading">t e x t</h1>
#heading {
color:#66CCFF;
font-size:50px;
width:0.5em;
}
