JS / CSS Как изменить цвет фона в середине преобразования?

Question

Итак, я пытаюсь создать эффект флипборда для некоторых элементов (например, одна сторона белая, а другая черная).И сейчас у меня есть это:

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: 1s;
}

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

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

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

Answer 2

Просто отрегулируйте переход фона:

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 3

Вы можете использовать следующую структуру для достижения этого

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>