Text rotation in HTML, CSS, JS

Question

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="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>

All your code block are belong to us. – The Muffin Man Apr 02 '11 at 08:01 — The Muffin Man, Apr 02 '11 at 08:01
It should work in Safari/Chrome and Opera as well. – icktoofay Apr 02 '11 at 08:04 — icktoofay, Apr 02 '11 at 08:04
@icktoofay i need to do it in IE – Sourav Apr 02 '11 at 08:06 — Sourav, Apr 02 '11 at 08:06
@Sourav, You will learn in due time my young grasshopper. – The Muffin Man Apr 02 '11 at 08:07 — The Muffin Man, Apr 02 '11 at 08:07
@Nick ok my senior grasshopper. – Sourav Apr 02 '11 at 08:08 — Sourav, Apr 02 '11 at 08:08

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

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>

IE may or may not be "modern", but it is the market leader. A solution that doesn't work in the most common browser isn't really a solution... — Eric J., Aug 04 '12 at 02:06

johnlemon · Answer 2 · 2011-04-02T08:17:17.017

0

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 */

edited Apr 02 '11 at 08:17

answered Apr 02 '11 at 08:05

johnlemon

20,761
42
119
178

in IE i can rotate for 90,180,270 degrees, but i can't rotate for 45 or 90 degree ! – Sourav Apr 02 '11 at 08:08
how to calculate the matrix values?? – Anand Thangappan Jul 19 '11 at 10:31
@AnandThangappan, see [Rotation Matrix](http://en.wikipedia.org/wiki/Rotation_matrix) – rslemos Jul 26 '14 at 17:26

score 0 · Accepted Answer · answered Apr 02 '11 at 08:06

0

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

answered Apr 02 '11 at 08:06

JohnP

49,507
13
108
140

1

Also check this out: http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie – Theraot Sep 12 '11 at 05:50

Hussein · Answer 4 · 2011-04-02T08:26:02.533

0

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;
}

Check working example at http://jsfiddle.net/u4Wd2/

edited Apr 02 '11 at 08:26

answered Apr 02 '11 at 08:15

Hussein

42,480
25
113
143

Dear Hussein, jQuery Rotate plugin only supports for images not for text :( – Feb 07 '14 at 01:16

Text rotation in HTML, CSS, JS

4 Answers4

Demo: turi.co/up/rand_rotate

Check working example at http://jsfiddle.net/u4Wd2/