Как создать кубическое 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>
<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);
}
}
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 анимации.