Text rotation in HTML, CSS, JS
How to rotate a text (cross browser) ? my code works in FireFox, Opera :(
I WANT TO ROTATE TEXT ON IE TOO (_Rotation degree can be any degree within 15 and 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="mem开发者_如何学Co" 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>
Seems to work OK in all modern browsers (not IE) for me.
Demo: 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>
These 3 rules will make the non IE browsers rotate.
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
For IE, you could use filters. I've seen a -ms-transform somewhere, but can't seem to find it right now.
Filter usage : 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
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 */
Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers
* 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 rotation
Where #myImage is the id of the element you want rotated.
If all you want to do is rotate text vertically, you can use simple CSS without much effort.
<h1 id="heading">t e x t</h1>
#heading {
color:#66CCFF;
font-size:50px;
width:0.5em;
}
加载中,请稍侯......
精彩评论