CSS3 2D Transforms: Rotate Property

Here is the brief description of how to rotate a 2D element clockwise or counter-clockwise according to a given degree in CSS3 using the CSS3 rotate() property.

Explanation

Property :

rotate()

Usage:


transform: rotate(20deg);
transform: rotate(-20deg);

Definition:

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

Example 1:


This example rotates the <div> element clockwise with 20 degrees
<style>
.demodiv{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
}
</style>
<div class='demodiv'>
This is an example for 2D Transform Rotate() property.
</div>

Result:
This is an example for 2D Transform Rotate() property.


Example 2:


This example rotates the <div> element counter-clockwise with 20 degrees
<style>
.demodiv1{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
}
</style>
<div class='demodiv1'>
This is an example for 2D Transform Rotate() property.
</div>

Result:
This is an example for 2D Transform Rotate() property.



Ask Questions

Ask Question