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

Question

所以我正在尝试为某些 div 创建翻转板效果(即:一侧为白色，另一侧为黑色)。现在我有这个:

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>