square rotates on mouseover in clockwise direction for odd numbered mouseover and anticlockwise direction for even numbered mouseover
var box = document.getElementById("box")
function rotate() {
//if ( ? ? ? ) {
// box.className = 'even';
//} else {
// box.className = 'odd';
//}
}#box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s;
}
.even {
transform: rotate( -180deg);
/* transition: transform 150ms ease; */
}
.odd {
transform: rotate( 180deg);
/* transition: transform 150ms ease; */
}<div id="box" onmouseover="rotate()"></div>Use pure css like i do on the code below Why you use even and odd without having an element in HTML? You dont need javascript for rotating an element
#box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s;
}
#box:hover { /*here is the change*/
transform: rotate( -180deg );
/* transition: transform 150ms ease; */
}
#box:hover { /*here is the change*/
transform: rotate( 180deg );
/* transition: transform 150ms ease; */
}<div id="box"></div>I can do this only in css if you need . below is the code.
.cmn{
display:inline-block;
padding:65px;
background:red;
margin:45px;
color:#fff;
}
.even {
transform: rotate( 0deg );
transition: transform 150ms ease; /**/
}
.even:hover {
transform: rotate( -180deg );
transition: transform 150ms ease; /**/
}
.odd {
transform: rotate( 0deg );
transition: transform 150ms ease;
}
.odd:hover {
transform: rotate( 180deg );
transition: transform 150ms ease;
} <div class="cmn even">Lorem Even</div>
<div class="cmn odd">Epsum Odd</div>