el cuadrado gira al pasar el mouse en el sentido de las agujas del reloj para el mouseover impar y en el sentido contrario a las agujas del reloj para el mouseover par
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 css puro como lo hago en el código a continuación . ¿Por qué usa pares e impares sin tener un elemento en HTML? No necesitas javascript para rotar un elemento
#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>Puedo hacer esto solo en css si lo necesita. a continuación se muestra el código.
.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>