how to rotate square clockwise and anticlockwise on mouseover?-CodePudding

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" onm ouseover="rotate()"></div>

CodePudding user response：

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>

CodePudding user response：

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 >Lorem Even</div>
  <div >Epsum Odd</div>