How to Rotate Element With Smooth Animation on Hover in Browser Using HTML5 and CSS3 Full Project For Beginners


Welcome folks today in this blog post we will be rotating element with smooth animation on hover in browser using html5 and css3. All the full source code of the application is given below.




Get Started




In order to get started you need to make a index.html file and copy paste the following code






<div id="myElement"> </div>


#myElement {
   width: 350px;
   height: 100px;
   background: red;
   -ms-transition: 0.4s ease-in-out;
   -webkit-transition: 0.4s ease-in-out;
   transition: 0.4s ease-in-out;

#myElement:hover {
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);


Leave a Reply