What is the best way to rotate a square in both clockwise and counterclockwise directions when the

Question

What is the best way to rotate a square in both clockwise and counterclockwise directions when the

When the mouse hovers over, the square will rotate in a clockwise direction for odd-numbered hover events and in an anticlockwise direction for even-numbered hover events.

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>

javascript html css

Answer 1

Answer №1

If you require it, I am able to achieve this using only CSS. Here is the code snippet:

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

Answer 2

If you require it, I am able to achieve this using only CSS. Here is the code snippet:

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

Answer 3

Answer №2

Utilize pure CSS as demonstrated in the code snippet below Have you considered using even and odd selectors without any corresponding HTML elements? There is no requirement for JavaScript to achieve element rotation.

#box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s;
}

#box:hover { /* modification occurs here */
    transform: rotate( -180deg );            
    /* transition: transform 150ms ease; */
}

#box:hover { /* another modification */
    transform: rotate( 180deg );            
    /* transition: transform 150ms ease; */
}

<div id="box"></div>

Answer 4

Utilize pure CSS as demonstrated in the code snippet below Have you considered using even and odd selectors without any corresponding HTML elements? There is no requirement for JavaScript to achieve element rotation.

#box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s;
}

#box:hover { /* modification occurs here */
    transform: rotate( -180deg );            
    /* transition: transform 150ms ease; */
}

#box:hover { /* another modification */
    transform: rotate( 180deg );            
    /* transition: transform 150ms ease; */
}

<div id="box"></div>

Answer 5

Answer №3

let container = document.getElementById('container');
let isRed = true;

function changeColor(){
    if(isRed === true){
        container.className = "red";
    } else{
        container.className = "blue";
    }
    isRed = !isRed;
}

#container {
    width: 150px;
    height: 150px;
    background-color: red;
    transition: background-color 1s;
}
.red{
    background-color: red;
} 
.blue{
    background-color: blue;
}

<div onmouseover="changeColor()" id="container"></div>

Answer 6

let container = document.getElementById('container');
let isRed = true;

function changeColor(){
    if(isRed === true){
        container.className = "red";
    } else{
        container.className = "blue";
    }
    isRed = !isRed;
}

#container {
    width: 150px;
    height: 150px;
    background-color: red;
    transition: background-color 1s;
}
.red{
    background-color: red;
} 
.blue{
    background-color: blue;
}

<div onmouseover="changeColor()" id="container"></div>

What is the best way to rotate a square in both clockwise and counterclockwise directions when the

Answer №1

Answer №2

Answer №3

Similar questions

Display HTML code inside a specified div

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Is it possible to enable extensions in incognito mode as the default setting?

Retrieving the value of a field using its name within a Meteor template

Issue with October CMS: Radio button selection triggers an Ajax call, but clicking twice in quick succession causes the content

Execute a function only after the completion of another

Creating a query string in MongoDB using [Object] as a field

Tips for refreshing React context after a successful login

What is the method for verifying a condition within a Javascript function?

Utilizing Z-Index on DropDownTree has no impact on its display

Using elements and querySelector in VueJS is not effective

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

Testing Async operations in the browser with Mocha and Chai

Executing PHP Functions with Script Tags

How to conditionally close a <div> tag in Vue.js

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

Creating a dynamic two-player chess application using Django - requiring the player's chess board to automatically update whenever the opponent makes a move

Enhance the current menu item in WordPress by assigning a class to the anchor tag

Call a function of a javascript object from inside a callback function

Securing Objects in Parse with the JavaScript API - Linking Users to their saved entities