09.07.2012 7 480 Скрипты / Slider

3D анимация вращения куба

Сегодня будет создавать 3D анимацию вращения используя css3 3d transform и css3 animation без использования jаvascript.

Идея заключается в создании слайдера в котором смена изображений происходит за счет 3D вращения кубов на которые "разрезается" картинка.

Замечу, что не все браузеры поддерживают свойство css3 3D transform. 3D эффект можно увидеть только в Chrome и Safari.

Построение куба

HTML

А начнем мы с нащего центрального элемента в уроке - куба.
Как мы знаем куб имеет 6 граней - front, back, top, bottom, left, right (передняя, задняя, верхняя, нижняя, левая, правая). С помощью html мы должны "обозначить" все эти грани и отделить их друг от друга различными css классами.

<div id="viewContainer">
   <div class="cube" >
      <div class="facefront"></div>
      <div class="faceback"></div>
      <div class="faceleft"></div>
      <div class="faceright"></div>
      <div class="facetop"></div>
      <div class="facebottom"></div>
   </div>
</div>

CSS

Однако, эти html элементы не могут автоматически стать кубом без помощи css3 3d transform.

/*--- Container for cube animation ---*/
#viewStage
{
   -webkit-perspective: 1000px;
   -webkit-perspective-origin: 600px 600px;
}
/*--- Cube Style ---*/
.cube
{
   position: relative;
   width: 300px;
   height: 300px;
   /* 3D Transforms attributes */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
}
/* Each cube's face share same attributes */
.cube div
{
   position: absolute;
   width: 300px;
   height: 300px;
   opacity:.7;
   -webkit-transform-origin: 50% 50%;
}
/*--- Cube faces color ---*/
.facefront
{
   background-color: red;
   -webkit-transform: translateZ(150px);
}
.faceback
{
   background-color: blue;
   -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
}
.facetop
{
   background-color: green;
   -webkit-transform: rotateX(90deg) translateZ(150px);
}
.facebottom
{
   background-color: purple;
   -webkit-transform: rotateX(-90deg) translateZ(150px);
}
.faceleft
{
   background-color: black;
   -webkit-transform: rotateY(90deg) translateZ(150px);
}
.faceright
{
   background-color: yellow;
   -webkit-transform: rotateY(-90deg) translateZ(150px);
}

Элемент #viewStage - это контейнер внутри которого будет происходить наша 3D анимация. Все элементя внутри будут перемещаться и вращаться относительно #viewStage, который сам останется фиксированным на странице.
Атрибут perspective определет, как далеко по оси Z может располагаться 3D элемент. Чем большее значение, тем менее очевидным будет 3D эффект.

Если вы вставите html код и css разметку приведенную выше в ваш текстовый редактор и запустите этот файл в браузере, то увидите красочный куб. Если браузер у вас не поддерживает 3D transform, то на экране будут два отличающихся по цвету прямоугольника.
Попробуйте изменить значение perspective и посмотрите, что станет с кубом.

Множество кубов

Итак, после рассмотрения основного принципа построения куба, используя css3 3d transform, пройдемся по разметке первого Демо. Однако тут мы исключили некоторые префиксы для браузеров (-moz), чтобы уменьшить объем, но в исходниках они есть.

HTML

Первым шагом будет создание нескольких кубов и объединение их в один большой куб. Достичь этого мы можем за счет дублирования приведенной выше html разметки куба и использования различных css стилей. Также всем элементам куба дадим различные идентификаторы (ID).

<div id="viewStage">
   <div id="cube1" class="cube" >
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
   </div>
   <div id="cube2" class="cube" >
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
   </div>
   <div id="cube3" class="cube" >
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
   </div>
</div>

CSS

Стилизация будет такая:

/*--- Container for cube animation ---*/
#viewStage
{
   width: 450px;
   height: 300px;
   -webkit-perspective: 450px;
   -webkit-perspective-origin: 50% 50%;
}
/*--- Cube Style ---*/
.cube
{
   position: relative;
   float: left;
   width: 150px;
   height: 300px;
   /* Cube Transforms attributes */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
}
/*--- Cubes' Face Style ---*/
/* Face share attributes */
.cube div
{
   background-color: #000;
   background-size: 450px 300px;
   position: absolute;
   -webkit-transform-origin: 50% 50%;
   -webkit-backface-visibility: hidden;
}
/* Face group fb - Front and Back */
.cube div.fb
{
   width: 150px;
   height: 300px;
}
/* Face group tb - Top and Bottom */
.cube div.tb
{
   width: 150px;
   height: 300px;
}
/* Face group lr - Left and Right */
.cube div.lr
{
   width: 400px;
   height: 400px;
}
/* Individual Face attributes */
.facefront
{
   -webkit-transform: translateZ(150px);
}
.facebck
{
   -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
}
.facetop
{
   -webkit-transform: rotateX(90deg) translateZ(150px);
}
.facebottom
{
   -webkit-transform: rotateX(-90deg) translateZ(150px);
}
.faceleft
{
   -webkit-transform: rotateY(90deg) translateZ(0px);
}
.faceright
{
   -webkit-transform: rotateY(-90deg) translateZ(150px);
}

Атрибут -webkit-backface-visibility используется к элементу и указывает ему должен ли он быть видимым, если не обращен к экрану. По умолчанию значение - видим.

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

/*--- Cubes' faces ---*/
.facefront
{
   background-image: url(../image1.jpg);
   -webkit-transform: translateZ(150px);
}
.facebck
{
   background-image: url(../image3.jpg);
   -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
}
.facetop
{
   background-image: url(../image2.jpg);
   -webkit-transform: rotateX(90deg) translateZ(150px);
}
.facebottom
{
   background-image: url(../image4.jpg);
   -webkit-transform: rotateX(-90deg) translateZ(150px);
}
.faceleft
{
   -webkit-transform: rotateY(90deg) translateZ(0px);
}
.faceright
{
   -webkit-transform: rotateY(-90deg) translateZ(150px);
}
/* Background position */
#cube1 div
{
   background-position: 0 0;
}
#cube2 div
{
   background-position: -150px 0;
}
#cube3 div
{
   background-position: -300px 0;
}

Вращение куба

Сейчас реализуем автоматическое вращение куба. Для этого случая мы будем использовать keyframes "rotation".

/*--- Cube Style ---*/
.cube
{
   position:relative;
   float:left;
   width:150px;
   height:300px;
   /* Cube Transforms attributes */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
   /* Cube Animation attributes */
   -webkit-animation-name: rotation;
   -webkit-animation-timing-function: ease;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 15s;
}

Приведенные выше css атрибуты генерируют анимацию продолжительностью 15 секунд.

Keyframes "rotation" для Демо 1 приведен ниже. Этот keyframes будет поворачивать куб на четверть круга и затем приостанавливать вращение на несколько секунд, после которых куб будет продолжать вращаться и опять делать паузу.

/*-- Keyframes --*/
@-webkit-keyframes rotation
{
   from, to {  }
   10%, 25% { -webkit-transform: rotateX(-90deg); }
   35%, 50% { -webkit-transform: rotateX(-180deg); }
   60%, 75% { -webkit-transform: rotateX(-270deg); }
   85%, 100% { -webkit-transform: rotateX(-360deg); }
}

В Демо 2 и Демо 3 приведены примеры более сложного вращения.

Улучшения

К этому моменту вы уже можете увидеть эффект вращающегося куба. Однако эффект выглядит грубоватым и не гибким. Следовательно мы должны несколько улучшить его.
Во-первых, сделаем вращение более привлекательным, добавив небольшую задержку анимации для каждого куба - animation-delay.

/*-- Cubes z-index fix with animation delay --*/
#cube1
{
   z-index: 1;
   -webkit-animation-delay: 1s;
}
#cube2
{
   z-index: 2;
   -webkit-animation-delay: 1.2s;
}
#cube3
{
   z-index: 1;
   -webkit-animation-delay: 1.4s;
}

Далее, добавим большей гибкости для easing эффекта, вместо его дефолтного значения.

/*--- Cube Style ---*/
.cube
{
   position:relative;
   float:left;
   width:200px;
   height:400px;
   /* Cube Transforms attributes */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
   /* Cube Animation attributes */
   -webkit-animation-name: rotation;
   -webkit-animation-timing-function: cubic-bezier(0.6, -1, 0.4, 1.5);
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 15s;
}

И последнее, будем определять неподдерживающие свойство 3D transform браузеры, с выводом соответствующего текста.

<style>
/*** Browsers fix ***/
.supported
{
   display: none;
}
.unsupported
{
   display: block;
}
/*** Webkit browser ***/
@media screen and (-webkit-transform-3d)
{
   .supported
   {
      display: block;
   }
   .unsupported
   {
      display: none;
   }
}
</style>
    <div class="notice support">Да! Ваш браузер <strong>поддерживает CSS3 3D transforms</strong>.</div>
    <div class="notice unsupport">Вот ёлки..! Ваш браузер <strong>НЕ поддерживает CSS3 3D transforms</strong>, используйте <strong>Chrome</strong> или <strong>Safari</strong> чтобы увидеть эффект.</div>

Скачать 2554Загрузок 374,66 Kb

Демо

Ссылки

3D анимация вращения куба

Построение куба

HTML

CSS

Множество кубов

HTML

CSS

Вращение куба

Улучшения

Комментарии

Похожие статьи

В редакторе кода я предпочитаю тему оформления