The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. Using 20 degrees, the positive value rotates the <div> element clockwise while the negative value rotates it counter-clockwise:
transform: rotate(20deg); <---OR---> transform: rotate(-20deg);
HTML file: | Displayed by browser: |
---|---|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv1 { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); /* Standard syntax */ } div#myDiv2 { -ms-transform: rotate(-20deg); /* IE 9 */ -webkit-transform: rotate(-20deg); /* Safari */ transform: rotate(-20deg); /* Standard syntax */ } </style> <body> <div> This a normal div element. </div> <div id="myDiv1"> <p><b>Using Rotate 20 degrees:</b></p> <p>The rotate(20) method rotates this div element clockwise with a positive number.</p> </div> <br /><br /><br /> <hr /> <br /><br /> <div> This a normal div element. </div> <div id="myDiv2"> <p><b>Using Rotate -20 degrees:</b></p> <p>The rotate(-20) method rotates this div element counter-clockwise with a negative number.</p> </div> </body> |
This a normal div element.
Using Rotate 20 degrees: The rotate(20) method rotates this div element clockwise with a positive number.
This a normal div element.
Using Rotate -20 degrees: The rotate(-20) method rotates this div element counter-clockwise with a negative number. |