[英]how to rotate square clockwise and anticlockwise on 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>
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>
像我在下面的代码中那样使用纯 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; */ }
<div id="box"></div>
如果您需要,我只能在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.