CODEWITHSUNDEEP
javascripthtmlcss
therks
therks

Reputation: 528

JS/CSS How to change background color in middle of transform?

So I'm trying to create a flipboard effect for some divs (ie: One side is white, the other is black). And right now I have this:

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>

But I'm not sure how to have the background stay white, until the rotation is "flat" and then change color. Any ideas?

Upvotes: 0

Views: 438

Answers (3)

Temani Afif
Temani Afif

Reputation: 273914

Simply adjust the transition of the background:

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; /*change imediately after 0.5s*/
}

.flipped {
  transform: rotateX(180deg);
  background: yellow;
}
<div id="test"></div>

But better rely on animation than using transtion with JS:

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

Upvotes: 2

Md Junaid Alam
Md Junaid Alam

Reputation: 1349

You can use animation to set the last frame as 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>

Upvotes: 0

Nidhi
Nidhi

Reputation: 1453

You can use the below structure for achieving this

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>

Upvotes: 1

Related Questions