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
– The Muffin Man

2011-04-02 08:01:12 +00:00
Commented Apr 2, 2011 at 8:01 — The Muffin Man
– The Muffin Man, Commented Apr 2, 2011 at 8:01
It should work in Safari/Chrome and Opera as well.

icktoofay
– icktoofay

2011-04-02 08:04:13 +00:00
Commented Apr 2, 2011 at 8:04 — icktoofay
– icktoofay, Commented Apr 2, 2011 at 8:04
@icktoofay i need to do it in IE

Sourav
– Sourav

2011-04-02 08:06:00 +00:00
Commented Apr 2, 2011 at 8:06 — Sourav
– Sourav, Commented Apr 2, 2011 at 8:06
@Sourav, You will learn in due time my young grasshopper.

The Muffin Man
– The Muffin Man

2011-04-02 08:07:18 +00:00
Commented Apr 2, 2011 at 8:07 — The Muffin Man
– The Muffin Man, Commented Apr 2, 2011 at 8:07
@Nick ok my senior grasshopper.

Sourav
– Sourav

2011-04-02 08:08:06 +00:00
Commented Apr 2, 2011 at 8:08 — Sourav
– Sourav, Commented Apr 2, 2011 at 8:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 2, 2011 at 8:06

Marcel

28.1k9 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric J. Over a year ago

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...

JohnP · Accepted Answer · 2011-04-02 08:06:02Z

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 2, 2011 at 8:06

JohnP

50k13 gold badges112 silver badges142 bronze badges

1 Comment

Theraot Over a year ago

Also check this out: stackoverflow.com/questions/4617220/css-rotate-property-in-ie

johnlemon · Accepted Answer · 2011-04-02 08:17:17Z

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 2, 2011 at 8:17

answered Apr 2, 2011 at 8:05

johnlemon

21.6k45 gold badges124 silver badges182 bronze badges

3 Comments

Sourav Over a year ago

in IE i can rotate for 90,180,270 degrees, but i can't rotate for 45 or 90 degree !

Anand Thangappan Over a year ago

how to calculate the matrix values??

rslemos Over a year ago

@AnandThangappan, see Rotation Matrix

Hussein · Accepted Answer · 2011-04-02 08:26:02Z

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 2, 2011 at 8:26

answered Apr 2, 2011 at 8:15

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

1 Comment

user3087089 Over a year ago

Dear Hussein, jQuery Rotate plugin only supports for images not for text :(

Collectives™ on Stack Overflow

Text rotation in HTML, CSS, JS

4 Answers 4

Demo: turi.co/up/rand_rotate

1 Comment

1 Comment

3 Comments

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

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo: turi.co/up/rand_rotate

1 Comment

1 Comment

3 Comments

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

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related