Анимация карточки. Изменения z-index элемента при достижении определенного кадра css анимации

Question

Возник вопрос, есть, грубо говоря, такая карточка с картинкой.
Как добиться того, чтобы при повороте более 270 градусов, верхняя карточка начинала перекрывать нижнюю?

document.querySelector(".step-1").onclick = () => {
  document.querySelector(".clear").click();
  document.querySelector(".block-0").classList.add('bottom');
}

document.querySelector(".step-2").onclick = () => {
  document.querySelector(".clear").click();
  document.querySelector(".block-0").classList.add('top');
}

document.querySelector(".clear").onclick = () => {
  document.querySelector(".block-0").classList.remove('bottom');
  document.querySelector(".block-0").classList.remove('top');
}

:root {
  --img-side: 160px;
}

.gallery {
  width: var(--img-side);
  margin: 40px auto;
  position: relative;
}

.img-container {
  position: absolute;
  transition-duration: 0.9s;
  height: calc(var(--img-side) / 2);
  width: var(--img-side);
  overflow: hidden;
}

.block-0>img {
  transform: translateY(calc(var(--img-side) / -2));
}

.img-container.block-0 {
  transform: perspective(700px) rotateX(180deg);
}

.img-container.bottom {
  transform: perspective(700px) rotateX(0);
}

.img-container.top {
  transform: perspective(700px) rotateX(-120deg);
}

.block-0 {
  transform-origin: top center;
  z-index: 1;
  top: calc(var(--img-side) / 2);
}

<button class="step-1">step 1</button>
<button class="step-2">step 2</button>
<button class="clear">clear</button>
<div class="gallery">
  <div class="img-container block-0">
    <img src="https://picsum.photos/id/111/160" />
  </div>
  <div class="img-container block-1">
    <img src="https://picsum.photos/id/111/160" />
  </div>
</div>

Answer 1

Да, что-то затупил, можно было через @keyframes / или даже через какой нибудь animationend прикрутить.

document.querySelector(".start").onclick = () => {
  document.querySelector(".block-0").classList.remove('bottom');
  setTimeout(() => {
    document.querySelector(".block-0").classList.add('bottom')
  }, 0);
}

:root {
  --img-side: 160px;
}

.gallery {
  width: var(--img-side);
  margin: 40px auto;
  position: relative;
}

.img-container {
  position: absolute;
  height: calc(var(--img-side) / 2);
  width: var(--img-side);
  overflow: hidden;
}

.block-0>img {
  transform: translateY(calc(var(--img-side) / -2));
}

.img-container.block-0 {
  transform: perspective(700px) rotateX(180deg);
}

.img-container.bottom {
  animation: rotate 4s;
  animation-fill-mode: forwards;
}

.block-0 {
  transform-origin: top center;
  z-index: 1;
  top: calc(var(--img-side) / 2);
}

@keyframes rotate {
  0% {
    animation-timing-function: cubic-bezier(0, 0.4, 0.49, 0.99);
  }
  49.9999% {
    z-index: 1;
    transform: perspective(700px) rotateX(0);
  }
  50% {
    z-index: -10;
    animation-timing-function: cubic-bezier(0.69, -0.01, 1, 0.71);
  }
  100% {
    z-index: -10;
    transform: perspective(700px) rotateX(-180deg);
  }
}

<button class="start">start</button>

<div class="gallery">
  <div class="img-container block-0">
    <img src="https://picsum.photos/id/111/160" />
  </div>
  <div class="img-container block-1">
    <img src="https://picsum.photos/id/111/160" />
  </div>
</div>

БЛОГ НА HUSL

Анимация карточки. Изменения z-index элемента при достижении определенного кадра css анимации

Ответы (1 шт):