Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание трехмерной анимации с использованием только CSS3

24 мая 2014 | Опубликовано в css | 4 Комментариев »

Сегодня мы создадим трехмерный эффект, используя свойство CSS -webkit-perspective. Свойство perspective — это как раз то, что нужно, чтобы создать эффект трехмерности. Используя также свойства transform и transition, мы можем создать трехмерную анимацию на чистом CSS3.

 

 


Просто откройте страницу с примером, наведите указатель мыши на элементы киноафиш и удивитесь. Как вы могли догадаться, этот способ будет работать только в браузерах -webkit, таких как Safari и Chrome. Даже браузер Safari на iPhone воспроизводит эффект трехмерности, но не воспроизводит анимацию.

Демонстрация работыСкачать исходный код

Для тех из вас, у кого нет браузера -webkit, мы записали небольшое видео, чтобы вы смогли увидеть, как работает этот пример. Он раскрывает возможности и показывает силу CSS3.

Видео 

Вот небольшое видео примера работы этой страницы в браузере Safari.

Выглядит изящно, не правда ли? Теперь давайте посмотрим, как вы можете создать что-то подобное сами.

HTML 

Как обычно, мы используем HTML как основу для этого эффекта. В нем не будет ничего необычного, так как все волшебство будет происходить в CSS.

<ul id="movieposters">
<li>
<img src="images/01_iron_man_2.jpg" alt="Iron Man 2" />
<div class="movieinfo">
<h3>Iron Man 2</h3>
<p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
<a href="#" title="Iron Man 2">More info</a>
</div>
</li>
<!-- Следующие киноафиши -->
</ul>

Это все, что нам нужно для изящного эффекта. Не стесняйтесь добавить больше киноафиш и информации в список, и можно начинать.

CSS 

Вот CSS, к которому мы пришли. Обязательно прочитайте комментарии, так вы поймете, что делает код.

/* Элементы списка. Обратите внимание на свойство -perspective. Мы сделали так, чтобы свойство -transform-style правильно преобразовывало элемент info вместо с родительским элементом. Свойство перехода использовано для анимации. */
#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; }

/* Мы используем свойство трансформации, чтобы усилить эффект трехмерности, добавляя эффект поворота. Мы также добавим теней, чтобы придать еще больше глубины. Еще мы сделаем событие rotateY анимированным с помощью переходов для изображения. * / #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); }

/* Для блока с информацией о фильме мы делаем примерно то же, что и для изображения. Однако, мы также используем дополнительные свойства CSS, такие как расположение, внешние отступы и т. п., чтобы разместить его в нужном месте. Обратите внимание на свойства translateZ и rotateY, усиливающие эффект трехмерности. */
.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;
-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }

/* Анимировать возвращение изображения к его двухмерному виду, когда пользователь наводит указатель мыши на родительский элемент. */
#movieposters li:hover .movieinfo
{ -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }
/* Базовый CSS для информации о фильме. */
.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }
.movieinfo p { padding-bottom:15px; }
.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }

Это весь код, который нужен, чтобы создать этот прекрасный эффект.

Странности

Хотя эффект и так выглядит прекрасно, мы нашли несколько маленьких странностей:

Иногда, когда Вы наводите указатель мыши на афишу, это не вызывает запуска события :hover, так что анимация не выполняется.

По какой-то причине, когда анимируется последний элемент, афиша «Tron Legacy», блок с информацией быстро мигает прямо перед концом анимации.

Заключение 

Кроме этих довольно незначительных странностей, мы очень довольны окончательным результатом. Если у вас есть веб-проекты для браузеров, поддерживающих CSS3, Вы можете использовать в них этот способ.

Демонстрация работыСкачать исходный код

Автор урока Marco Kuiper

Перевод — Дежурка

Смотрите также:




Комментарии

  1. EZ-Web
    Thumb up Thumb down -1

    В Firefox не работает :)

    Ответить

    Леша Ответ:

    Thumb up Thumb down 0

    Да ну? К вашему сведению, Firefox не написан на движке webkid.

    Ответить

  2. EZ-Web
    Thumb up Thumb down +1

    ну движка webkiD вообще нет... если Вы про webkit, то фтопку такие решения, если они не кроссбраузерны

    Ответить

Оставить ответ


1 − = ноль

Вставить изображение