Rotate with CSS!!#~!$!

March 25, 2010

Hey friends… so here we are with yet another article for CSS that i would like to share with you people,

have you people ever imagined of rotating a text or a content on your web page?? I was stunned to look at this as i have been working with CSS only for the last few months, and for a person like me it was more of a wonder. There fore i gelt i must share this with all those who must know this as a CSS developer.

So how can this be done? Its very simple just few lines of CSS code as usual for the specific browser and there we have the object rotated as per our need in the HTML page, as is shown below.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

here you go with the code for the Opera and the MOzilla firefox, but there has been no simple code as this for the IE, as usual the browser compatibility has been the ghost that haunts every Web developer πŸ™‚

We just need to specify the angle of rotation in the parameter’s list, say if i had to rotate for about 30 degree clockwise then i might give the caode as,

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);

So there i shall have my content in the content tag getting rotated for the 30 degree angle, is n’t it fantastic to have our css do all these πŸ™‚

But what about IE???? we have a solution to this.. its a function defining with a matrix structure that defines the points of rotation converted from the unit of degree to PI, let me not confuse with a code that look like as below,

-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=-0.50000000, M21=0.50000000, M22=0.86602540,sizingMethod=’auto expand’)”;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=-0.50000000, M21=0.50000000, M22=0.86602540,sizingMethod=’auto expand’);
-moz-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

-webkit-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

-o-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

(the above code was for rotating 30 degree)

i will get this done in much easier way for the IE to be done, do follow this link “rotating in IE”. Jut give the angle and get your code for the CSS.

Hope this helps. Just give a try..
(Guidance: Jonathan Snook, thanks)
Do let me know your comments and views.


3 Responses to “Rotate with CSS!!#~!$!”

  1. anish Says:

    wow….nice blog…
    -webkit-transform is for chrome & safari, and -o-transform is for opera right?

    • thanks, your comment has made me go little more deep into this topic, as i have read it says that in case safari we use -webkit-transform, that has to be given argument values, depending upon the argument (which can be in integer length, or degree) it performs transform functions like – scaling, skew, rotate etc and as specified even Opera supports the webkit – transform function, though i have not tried it out. But i read a lot more here for opera transformations property and got to know that we have it for Opera as,

      this does not give a static rotation or any transformation but rather renders a dynamis animation type of effect such as movements, fading and all that with out javascript πŸ™‚ (a yet another css wonder)

      this will help you all –

  2. Huynh Hieu Says:

    thanks for shared

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: