@SeRGaN_87

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

Здравствуйте, подскажите пожалуйста, почему не срабатывает анимация?
<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);
  }
}
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Потому что .blocks находится в плоскости .banner
Либо добавляйте transform-style к .banner либо переносите .blocks в section, есть еще нюансы с overflow: hidden; но это не тот случай
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
VOLKA Лимассол
от 2 500 €
VOLKA Лимассол
от 2 500 ₽
Allcorrect Санкт-Петербург
от 150 000 ₽
28 сент. 2022, в 19:38
100000 руб./за проект
28 сент. 2022, в 19:35
25000 руб./за проект