3D АНИМАЦИЯ ВРАЩЕНИЯ КУБА

Идея заключается в создании слайдера в котором смена изображений происходит за счет 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.

Код

#viewStage
{
  -webkit-perspective: 1000px;
  -webkit-perspective-origin: 600px 600px;
}

.cube
{
  position: relative;
  width: 300px;
  height: 300px;
  /* 3D Transforms attributes */
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.cube div
{
  position: absolute;
  width: 300px;
  height: 300px;
  opacity:.7;
  -webkit-transform-origin: 50% 50%;
}
.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>

  • FalleN

  • 11940

  • 1

  • 346
Теги: Transform, css3, Slider, animation, 3D

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

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

Добавить комментарий:

Для добавления вы должны авторизироваться!