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

【问题标题】：how to rotate square clockwise and anticlockwise on mouseover?如何在鼠标悬停时顺时针和逆时针旋转正方形？
【发布时间】：2022-01-15 06:09:40
【问题描述】：

鼠标悬停时，奇数鼠标悬停时正方形按顺时针方向旋转，偶数鼠标悬停时按逆时针方向旋转

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; */
}

&lt;div id="box" onmouseover="rotate()"&gt;&lt;/div&gt;

【问题讨论】：

嗨，您似乎忘记发布您的 html 代码了。

标签： javascript html css

【解决方案1】：

如果您需要，我只能在 css 中执行此操作。下面是代码。

.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>

【讨论】：

【解决方案2】：

像我在下面的代码中那样使用纯 css 为什么在 HTML 中没有元素的情况下使用偶数和奇数？您不需要 javascript 来旋转元素

#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; */
}

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：