正方形在滑鼠懸停時順時針旋轉奇數滑鼠懸停，逆時針旋轉偶數滑鼠懸停
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>uj5u.com熱心網友回復：
像我在下面的代碼中那樣使用純 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>uj5u.com熱心網友回復：
如果您需要，我只能在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411141.html
標籤：