CSS transforms – Эффект вращения куба

В этой статье, я покажу вам как создать удивительную анимацию вращения, используя CSS transforms и дополнительные свойства CSS анимации, не используя JavaScript.

Сложность

Создадим 3D галерею изображений в виде "куба". Несколько небольших кубов расположены рядом друг с другом, в каждом содержится отдельная часть изображения, вместе они создают один большой куб с одним изображением. Один за другим они будут поворачиваться с различной задержкой. Этот процесс повторяется несколько раз.

В исходных файлах, можете посмотреть на полную HTML разметку и стиль. В противном случае можете сразу перейти к следующему этапу.

Создание куба

Давайте начнем с базового элемента – куб. Конечно, он не связан с нашим демонстрационным примером, однако это будет его основой.

Куб состоит из шести сторон - передней, задней, верхней, нижней , левой и правой. Таким образом, мы должны задать в коде все эти шесть сторон, используя 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>

Однако эти HTML элементы не в состоянии автоматически стать кубом без css transforms rotate.

/*--- Контейнер для анимации куба ---*/
#viewStage
{
   -webkit-perspective: 1000px;
   -webkit-perspective-origin: 600px 600px;
}
/*--- Cube Style ---*/
.cube
{
   position: relative;
   width: 300px;
   height: 300px;
 
   /* Атрибуты 3D Transforms*/
   -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 эффект.

Поэкспериментируйте со значением perspective и посмотрите, что происходит с кубом.

Многократные кубы

После создания основного куба, перейдем к 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 для объединения кубов:

/*--- анимация куба ---*/
#viewStage
{
   width: 450px;
   height: 300px;
   -webkit-perspective: 450px;
   -webkit-perspective-origin: 50% 50%;
}
 
/*--- стиль куба ---*/
.cube
{
   position: relative;
   float: left;
   width: 150px;
   height: 300px;
 
   /* Cube Transforms attributes */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
}
 
/*--- стиль передней части куба ---*/
/* Face share attributes */
.cube div
{
   background-color: #000;
   background-size: 450px 300px;
   position: absolute;
   -webkit-transform-origin: 50% 50%;
   -webkit-backface-visibility: hidden;
}
 
/* группировка передней и задней стороны  */
.cube div.fb
{
   width: 150px;
   height: 300px;
}
/* группировка верхний и нижней стороны */
.cube div.tb
{
   width: 150px;
   height: 300px;
}
/* группировка правой и левой стороны */
.cube div.lr
{
   width: 400px;
   height: 400px;
}
 
/* индивидуальные атрибуты */
.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 используется для определения, должен ли элемент быть видимым, если не направлен в сторону экрана. Значение по умолчанию - visible.

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

/*--- стороны куба ---*/
.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;
}

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

Теперь, сделаем чтобы эти кубы вращались автоматически! В этом случае мы используем css свойство rotation.

/*--- стиль куба ---*/
.cube
{
   position:relative;
   float:left;
   width:150px;
   height:300px;
 
   /* атрибуты Transforms */
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
 
   /* атрибуты анимации */
   -webkit-animation-name: rotation;
   -webkit-animation-timing-function: ease;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 15s;
}

Здесь мы создали анимацию продолжительностью в 15 секунд.

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

/*-- ключевые кадры --*/
@-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, меняя значения ключевых кадров.

Улучшение

Теперь у Вас должен быть готов эффект вращения куба. Однако, эффект выглядит грубым и негибким. Следовательно, мы должны его улучшить.

Во-первых, сделаем вращения более привлекательными, добавив задержку анимации для каждого куба.

/*-- задержка анимации --*/
#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;
}

Затем, меняем анимацию:

/*--- стиль куба ---*/
.cube
{
   position:relative;
   float:left;
   width:200px;
   height:400px;
 
   /* атрибуты transform*/
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 50% 50%;
 
   /* атрибуты анимации */
   -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;
}

Наконец, установим медиа запросы для браузеров, которые не поддерживают свойство CSS3 transforms. Если браузер пользователя не поддерживает CSS3 transforms, то на экране будет отображаться текстовое сообщение об ошибке.

<style>
  .supported
  {
  display: none;
  }
  .unsupported
  {
  display: block;
  }
  

  @media screen and (-webkit-transform-3d)
  {
  .supported
  {
  display: block;
  }
  .unsupported
  {
  display: none;
  }
  }
  </style>

  
  <div class="supported">Yes! Your browser DOES support CSS3 3D transforms.</div>
  <div class="unsupported">Oops! Your browser DOESN'T support CSS3 3D transforms.</div>

ДЕМО СКАЧАТЬ Перевод статьи CSS3 3D Transforms Animation – Cube Rotation Effect

 

Тэги: 3D transformgallery

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.