Почему не работает анимация transform: translateZ?

Question

[SeRGaN_87]

Здравствуйте, подскажите пожалуйста, почему не срабатывает анимация?

<section>
        <div class="banner">
            <div class="blocks"></div>
        </div>
</section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
body {
   background: black;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  transform-style: preserve-3d;
  perspective: 2000px;
}
.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.banner .blocks {
  position: relative;
  display: block;
  width: 5vw;
  height: 5vh;
  background: #fff;
  animation: animate 2s ease-in-out forwards;
}

@keyframes animate 
{
  0%
  {
    transform: translateZ(2000px);
  }
  100% 
  {
    transform: translateZ(0px);
  }
}

Comments

[Сергей Сергей]

section *{
  transform-style: preserve-3d;
}

Answer 1

[Виталий Першин]

Потому что .blocks находится в плоскости .banner
Либо добавляйте transform-style к .banner либо переносите .blocks в section, есть еще нюансы с overflow: hidden; но это не тот случай

Comments

[SeRGaN_87]

спасибо за помощь и урок