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
sir ji,
ReplyDeletetime and date is not working. check this.
where u put time and date?
ReplyDeleteinside div?
Dear This Rotation not Support in Internet Explore lower than IE-9 any solutions for IE
ReplyDeleteThanks
Darpan Patel
info@dapsolutions.net
www.dapsolutions.net
.example {
Delete-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 */
}
This comment has been removed by the author.
ReplyDelete