Веб-мастерская Ларисы ВоронинойКубическое 3D слайдшоу на чистом CSS
WEB-мастерская Ларисы Ворониной logo

Кубическое 3D слайдшоу на чистом CSS Июл 16 2017

Как создать кубическое 3D слайдшоу с помощью только HTML и CSS, без скриптов и библиотек?

Легко!

Нам понадобятся 4 изображения одинакового размера (в моём примере 400/400px), их нужно поместить в папку images.

HTML разметка пишется в файле index.html.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8" />
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Кубический 3D слайдер</title>
     </head>
     <body>
          <div class="wrapper">
               <div class="cub">
                    <img class="back" src="images/1.jpg">
                    <img class="front" src="images/2.jpg">
                    <img class="left" src="images/3.jpg">
                    <img class="right" src="images/4.jpg">
               </div>
          </div>
     </body>
</html>

В браузере мы увидим просто 4 изображения, выстроенных друг за другом.

Теперь нам нужно из этих изображений собрать куб и заставить его вращаться против часовой стрелки. Это мы сделаем с помощью CSS в файле style.css.

html {
background: #555;
}
.wrapper {
     -webkit-perspective: 3000px;
     -ms-perspective: 3000px;
     perspective: 3000px;
     -webkit-perspective-origin: 70% 200%;
     -ms-perspective-origin: 70% 200%;
     perspective-origin: 70% 200%;
}
.cub {
     display: block;
     position: relative;
     top: 100px;
     margin: auto;
     width: 400px;
     height: 400px;
     -webkit-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-animation: spinY 20s infinite linear;
     -ms-animation: spinY 20s infinite linear;
     animation: spinY 20s infinite linear;
}
img {
     position: absolute;
     border: 1px solid #000;
}
.front {
     -webkit-transform: translateZ(200px);
     -ms-transform: translateZ(200px);
     transform: translateZ(200px);
}
.back {
     -webkit-transform: translateZ(-200px) rotateY(-180deg);
     -ms-transform: translateZ(-200px) rotateY(-180deg);
     transform: translateZ(-200px) rotateY(-180deg);
}
.left {
     -webkit-transform: translateX(-200px) rotateY(-90deg);
     -ms-transform: translateX(-200px) rotateY(-90deg);
     transform: translateX(-200px) rotateY(-90deg);
}
.right {
     -webkit-transform: translateX(200px) rotateY(90deg);
     -ms-transform: translateX(200px) rotateY(90deg);
     transform: translateX(200px) rotateY(90deg);
}
@keyframes spinY {
from {
     -webkit-transform: rotateY(0);
     -ms-transform: rotateY(0);
     transform: rotateY(0);
}
to {
     -webkit-transform: rotateY(-360deg);
     -ms-transform: rotateY(-360deg);
     transform: rotateY(-360deg);
}
}
@-webkit-keyframes spinY {
from {
     -webkit-transform: rotateY(0);
     -ms-transform: rotateY(0);
     transform: rotateY(0);
}
to {
     -webkit-transform: rotateY(-360deg);
     -ms-transform: rotateY(-360deg);
     transform: rotateY(-360deg);
}
}

3D эффекта можно добиться с помощью таких свойств как perspective, perspective-origin, transform-style.

Длительность и способ анимации задаётся свойством animation.

Само вращение куба создаётся с помощью свойства transform и keyframes анимации.


Рейтинг@Mail.ru