JSFiddle - React, Tailwind, and code Playground
by meo
HTML
<div class="rotation">
ROTATION
</div>
CSS
div.rotation {
background:red;
width: 300px;
height: 200px;
margin: 20px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-transition:all 1.0s ease-in-out;
}
div.rotation:hover {
-moz-transform: rotate(90deg); /* FF3.5+ */
-o-transform: rotate(90deg); /* Opera 10.5 */
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(90deg); /* IE9 */
transform: rotate(90deg);
}
JavaScript
setTimeout(function(){ $('div.rotation').addClass('finalrotation') }, 500)