如何在鼠标悬停时顺时针和逆时针旋转正方形？

Question

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>

Answer 1

const box = document.getElementById('box')
var isOdd = true;
function rotate(){
    if(isOdd === true){
        box.className = "odd"
        
    } else if (isOdd === false){
        box.className = "even"
    }
    isOdd = !isOdd;
}

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 2s;
}
.odd{
    transform: rotate(180deg) ;
} 
.even{
    transform: rotate(0) ;
}

<div  onmouseover="rotate()" id="box"></div>

Answer 2

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>

Answer 3

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>