Start Debugging
RU
2026-05-01 css Edit on GitHub

3D-анимации только на CSS3

Узнайте, как создавать 3D-анимации только средствами CSS3 - perspective и transform-transitions, с поддержкой WebKit и Firefox.

Автор: Marius Bughiu · 2 мин на чтение ·

Что вдохновило меня написать этот пост и ещё несколько других - это эта страница (работает только в Chrome и Safari). Удивительно, чего можно добиться только средствами CSS. Заглянем под капот - CSS этого эффекта выглядит так:

#movieposters li { 
    display:inline; float:left;
    -webkit-perspective: 500; -webkit-transform-style: preserve-3d;
    -webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; 
}

#movieposters li:hover { 
    -webkit-perspective: 5000; 
}

#movieposters li img { 
    border:10px solid #fcfafa; 
    -webkit-transform: rotateY(30deg);
    -moz-box-shadow:0 3px 10px #888; 
    -webkit-box-shadow:0 3px 10px #888;
    -webkit-transition-property: transform; 
    -webkit-transition-duration: 0.5s; 
}

#movieposters li:hover img { 
    -webkit-transform: rotateY(0deg); 
}

Несколько громоздко. Но если убрать borders и shadows и немного причесать код, видно, что всё не так уж сложно.

#movieposters li {
    display:inline; float:left;
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: perspective;
    -webkit-transition-duration: 0.5s;
}

#movieposters li:hover {
    -webkit-perspective: 5000;
}

#movieposters li img {
    -webkit-transform: rotateY(30deg);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 0.5s;
}

#movieposters li:hover img {
    -webkit-transform: rotateY(0deg);
}

Как видите, по сути выполняются два перехода:

Поэкспериментируйте со значениями и посмотрите, какие ещё интересные эффекты можно получить. Можете оставить комментарий со ссылкой на классный эффект, который у вас вышел.

Как заставить это работать в Firefox

По-настоящему заинтриговало то, что в Firefox это не работает. Почему? Несколько поисков в Google - и ответ стал очевиден: команды -webkit- - для браузеров на webkit, а Firefox требует префикс -moz-. Наверное, я и так должен был это знать…

Я добавил по новой строке для каждой команды и заменил -webkit- на -moz-, рассчитывая, что заработает. И заработало - вот только без анимации. Ещё пара поисков и без ответа - так что в подлинном духе разработчика я зашёл на stackoverflow.com и задал вопрос. Через пару часов получил первый ответ, и, к счастью, в нём было решение моей проблемы (можно посмотреть здесь). transition-property тоже должна быть -moz—свойством. Простые свойства вроде transform или perspective работают не так, как в webkit, поэтому пришлось использовать -moz-transform и -moz-perspective.

Вот итоговый CSS, к которому я пришёл:

#movieposters li {
    display:inline; float:left;
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: perspective;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -moz-perspective: 500;
    -moz-transform-style: preserve-3d;
    -moz-transition-property: -moz-perspective;
}

#movieposters li:hover {
    -webkit-perspective: 5000;
    -moz-perspective: 5000;
}

#movieposters li img {
    -webkit-transform: rotateY(30deg);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -moz-transform: rotateY(30deg);
    -moz-transition-property: -moz-transform;
    width: 210px;
}

#movieposters li:hover img {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
}

Вот современная версия без вендорных префиксов в виде самодостаточного HTML-файла. Откройте в любом актуальном браузере и наведите курсор на блоки — увидите смену перспективы.

<!doctype html>
<html>
<head>
  <style>
    #movieposters {
      list-style: none;
      padding: 0;
    }
    #movieposters li {
      display: inline-block;
      perspective: 500px;
      transform-style: preserve-3d;
      transition: perspective 0.5s;
    }
    #movieposters li:hover {
      perspective: 5000px;
    }
    #movieposters li .poster {
      width: 210px;
      height: 280px;
      background: linear-gradient(135deg, #87e0fd, #05abe0);
      border: 10px solid #fcfafa;
      box-shadow: 0 3px 10px #888;
      transform: rotateY(30deg);
      transition: transform 0.5s;
    }
    #movieposters li:hover .poster {
      transform: rotateY(0deg);
    }
  </style>
</head>
<body>
  <ul id="movieposters">
    <li><div class="poster"></div></li>
    <li><div class="poster"></div></li>
    <li><div class="poster"></div></li>
  </ul>
</body>
</html>

Префиксы -webkit- и -moz- из исходных сниппетов больше не нужны — все браузеры, выпущенные с 2013 года, поддерживают свойства без префиксов.

Comments

Sign in with GitHub to comment. Reactions and replies thread back to the comments repo.

< Назад