JS / CSS如何在变换中改变背景颜色？

Question

所以我试图为一些div创建一个flipboard效果（即：一边是白色，另一边是黑色）。而现在我有这个：

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>

但是我不知道如何让背景保持白色，直到旋转“平坦”然后改变颜色。有任何想法吗？

Answer 1

只需调整背景的过渡：

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>

但是更好地依赖动画而不是使用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>

Answer 2

您可以使用以下结构来实现此目的

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 3

您可以使用动画将最后一帧设置为黑色;

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>