Полезное в сети

Всегда в теме

Статистика


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


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 17 » Складывающаяся 3D анимация на CSS


12:42
Складывающаяся 3D анимация на CSS

Складывающаяся 3D анимация на CSS

Google Plus является источником вдохновения многих разработчиков, особенно в сфере использования CSS и JavaScript. В данном уроке воспроизводится эффект сворачивания карты. Для него используются 3D анимации, которые придают шарм визуализации, и не требуется ни строчки кода JavaScript.

demosourse


Разметка HTML

Для воспроизведения эффекта потребуется серия элементов:

<div id="container">

                <div class="parent1">

                               <div class="parent2">

                                               <div class="parent3">

                                                               <!-- Содержание располагается здесь -->

                                               </div>

                               </div>

                </div>

</div>

 

Первый элемент "parent" определяет состояние 3D, второе - видимое в процессе анимации содержание, а третий - содержание разворачиваемого блока.

 

CSS

Код CSS для создания данного эффекта значительно проще, чем может показаться на первый взгляд:

                               /* Статичное состояние */

                               #container         {

                                               width: 400px;

                                               height: 400px;

                                               position: relative;

                                               border: 1px solid #ccc;

                                               background: url(GoogleTestDW.png) 0 0 no-repeat;

                               }

                               .parent1              {

                                               /* Общий контейнер */

                                               height: 0;

                                               overflow: hidden;

 

                                               -webkit-transition-property: height;

                                               -webkit-transition-duration: .5s;

                                               -webkit-perspective: 1000px;

                                               -webkit-transform-style: preserve-3d;

 

                                               -moz-transition-property:height;

                                               -moz-transition-duration: .5s;

                                               -moz-perspective: 1000px;

                                               -moz-transform-style: preserve-3d;

 

                                               -o-transition-property:height;

                                               -o-transition-duration: .5s;

                                               -o-perspective: 1000px;

                                               -o-transform-style: preserve-3d;

 

                                               transition-property: height;

                                               transition-duration: .5s;

                                               perspective: 1000px;

                                               transform-style: preserve-3d;

                               }

                               .parent2              {

                                               /* Содержание, выводимое в процессе анимации */

                               }

                               .parent3              {

                                               /* Анимированный, "складывающийся" блок */

                                               height: 56px;

 

                                               -webkit-transition-property: all;

                                               -webkit-transition-duration: .5s;

                                               -webkit-transform: rotateX(-90deg);

                                               -webkit-transform-origin: top;

 

                                               -moz-transition-property: all;

                                               -moz-transition-duration: .5s;

                                               -moz-transform: rotateX(-90deg);

                                               -moz-transform-origin: top;

 

                                               -o-transition-property: all;

                                               -o-transition-duration: .5s;

                                               -o-transform: rotateX(-90deg);

                                               -o-transform-origin: top;

 

                                               transition-property: all;

                                               transition-duration: .5s;

                                               transform: rotateX(-90deg);

                                               transform-origin: top;

                               }

 

                               /* Состояние hover для включения анимаций */

                               #container:hover .parent1         { height: 111px; }

                               #container:hover .parent3         {

                                               -webkit-transform: rotateX(0deg);

                                               -moz-transform: rotateX(0deg);

                                               -o-transform: rotateX(0deg);

                                               transform: rotateX(0deg);

                                               height: 111px;

                               }

Статичное состояние элемента parent1 определяет 3D трансформацию и состояния перспективы, начиная с высоты 0px. Статичное состояние элемента parent3 устанавливает переход и трансформацию вращения. При наведении курсора высота элементов parent1 и parent3 анимируется до конечных значений (в нашем случае 111px), и они поворачиваются до 0 градусов.

Лучше всего таким образом выводит дополнительные изображения, так как на них лучше заметны изменения перспективы.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: davidwalsh.name/folding-animation
Перевел: Сергей Фастунов

Категория: CSS//HTML//JS | Просмотров: 507 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди