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>
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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.