How can I alter the background color while performing a transformation in JS/CSS?

Question

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far:

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}
.flipped {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  background: yellow;
}

<div id="test"></div>

However, my challenge now is figuring out how to keep the background white until the rotation becomes "flat" and only then change color. Any suggestions?

javascript html css

Answer 1

Answer №1

Make a smooth background transition like this:

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: 
    transform 1s linear,
    background 0s 0.5s linear; /*alter after 0.5s*/
}

.flipped {
  transform: rotateX(180deg);
  background: yellow;
}

<div id="test"></div>

Consider using animations instead of transitions with JavaScript:

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  animation:flip 1s infinite alternate linear;
}

@keyframes flip{
  from {
    transform: rotateX(0deg); 
    background:#fff; 
  }
  49.5% {
    background:#fff;
  }
  50% {
    transform: rotateX(90deg);
    background:yellow;
  }
  to {
   transform: rotateX(180deg);
    background:yellow;
  }
}

<div id="test"></div>

Answer 2

Make a smooth background transition like this:

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: 
    transform 1s linear,
    background 0s 0.5s linear; /*alter after 0.5s*/
}

.flipped {
  transform: rotateX(180deg);
  background: yellow;
}

<div id="test"></div>

Consider using animations instead of transitions with JavaScript:

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  animation:flip 1s infinite alternate linear;
}

@keyframes flip{
  from {
    transform: rotateX(0deg); 
    background:#fff; 
  }
  49.5% {
    background:#fff;
  }
  50% {
    transform: rotateX(90deg);
    background:yellow;
  }
  to {
   transform: rotateX(180deg);
    background:yellow;
  }
}

<div id="test"></div>

Answer 3

Answer №2

Follow this structure to achieve the desired effect

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

.container {
  background-color: transparent;
  width: 100px;
  height: 100px;
  perspective: 1000px; 
}
#test {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#test:before,#test:after {
  display:block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
#test:before {
  content:"";
  border: 1px solid white;
  transition: 1s;
  background-color: black;
  z-index: 2;
}
#test:after {
  content:"";
  border: 1px solid black;
  background-color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

.flipped {
  transform: rotateX(180deg);
}

<div class="container"><div id="test"></div></div>

Answer 4

Follow this structure to achieve the desired effect

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

.container {
  background-color: transparent;
  width: 100px;
  height: 100px;
  perspective: 1000px; 
}
#test {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#test:before,#test:after {
  display:block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
#test:before {
  content:"";
  border: 1px solid white;
  transition: 1s;
  background-color: black;
  z-index: 2;
}
#test:after {
  content:"";
  border: 1px solid black;
  background-color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

.flipped {
  transform: rotateX(180deg);
}

<div class="container"><div id="test"></div></div>

Answer 5

Answer №3

If you want to add a touch of animation to your design, consider setting the final frame to black;

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: 1s;
}

.flipped {
  transform: rotateX(180deg);
  animation: changeColor 0.3s 0.7s linear forwards;
}

@keyframes changeColor {
0%, 100%{background:black}
}

<div id="test"></div>

Answer 6

If you want to add a touch of animation to your design, consider setting the final frame to black;

setInterval(function () {
document.getElementById('test').classList.toggle('flipped')
}, 1000)

#test {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  transition: 1s;
}

.flipped {
  transform: rotateX(180deg);
  animation: changeColor 0.3s 0.7s linear forwards;
}

@keyframes changeColor {
0%, 100%{background:black}
}

<div id="test"></div>

How can I alter the background color while performing a transformation in JS/CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering a CSS issue during the edit process with PHP and JavaScript

What is the best way to incorporate jQuery's default handsontable into an AngularJS directive?

Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

Align text in the center of a static container

Looking to eliminate curly braces from a string?

list without specific order spacing

Exploring the functionality of placeholders within jQuery

Is there a way to prevent wrapping in a column, causing the last column to partially extend outside the container when the first column is hovered over?

nuxt-link: take me to the identical position with the hash in the URL

What is the best way to pass an input value into a function when a form is submitted in Angular 6?

JSON containing attributes represented by Unicode characters

Can you provide instructions on utilizing the async .update() function for DataTables within MDBootstrap?

Exploring the varying treatment of the noscript tag across different web browsers

Is it possible for a "position:absolute" div to maintain its relative width?

"Angular: Enhancing Functionality with Nested Controllers and Service Dependency Handling

Utilizing JSON and Javascript to dynamically generate and populate interactive tables

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

In Next.js, the 404 error page is displayed using getInitialProps

Implementing a play and pause button functionality for the carousel in Bootstrap 5

What is the best way to manually decrease the speed of an object's rotation using javascript?