how to rotate square clockwise and anticlockwise on mouseover?

Issue

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>

Solution

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>

Answered By - UI SMART