Corporate Trainer | Designer | Developer

Corporate Trainer | Designer | Developer

Wednesday, March 2, 2011

Rotating Div with CSS3





In this demo I am explaining you how to rotate div with help of CSS3 transform property.

Step 1.

Create a simple HTML page with two div element as shown bleow


Save this page as testrotate.html.

Step 2.

Now add style tag in the head section of your page

Step 3

Add following style to div selector inside the style tag

div{

width:150px;

height:75px;

background-color:yellow;

border:2px solid black;

}

Save and test the page you will see two div with yellow background

Step 4

Now add another style for second div using id selector below previous style

div#my{

background-color:cyan;

transform:rotate(60deg);

-moz-transform:rotate(60deg); /* For Firefox */

-webkit-transform:rotate(60deg); /* For Safari and Chrome */

-o-transform:rotate(60deg); /* For Opera */

}

Save and test the web page. You will see the the div with id my will transformed with angle 60 deg.

*Note this feature is not supported in Internet explorer.

Here is you final page with rotated div…. Enjoy


5 comments:

  1. sir ji,
    time and date is not working. check this.

    ReplyDelete
  2. where u put time and date?
    inside div?

    ReplyDelete
  3. Dear This Rotation not Support in Internet Explore lower than IE-9 any solutions for IE

    Thanks
    Darpan Patel
    info@dapsolutions.net
    www.dapsolutions.net

    ReplyDelete
    Replies
    1. .example {
      -webkit-transform: rotate(45deg); /* Chrome & Safari */
      -moz-transform: rotate(45deg); /* Firefox */
      -ms-transform: rotate(45deg); /* IE 9+ */
      -o-transform: rotate(45deg); /* Opera */
      transform: rotate(45deg); /* CSS3 */
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
      }

      Delete
  4. This comment has been removed by the author.

    ReplyDelete