3D Slider на этой странице, является эволюцией двухмерного “Cycle Slider“. Похожих примеров много в Интернете, но почти все они были реализованы с JavaScript и JQuery.
Первый 3D Slider выглядит как графический блок или куб с картинками.
Слайдер “Трёхмерный куб”
В таком виде, слайдер удобно использовать для презентации ваших фотографий или на фотосайте. Структура HTML5 совпадает с “Cycle Slider“, только здесь не используется прогресс бар. Есть только несколько корректировок в CSS3, необходимых для обеспечения соответствующего внешнего вида.
<div id="stapel">
<figure>
<img src="bilder500/Cottage.jpg" width="500"
height="333" alt="Kleines Cottage">
<figcaption>Kleines Cottage mit Reetdach</figcaption>
</figure>
<figure>
<img src="bilder500/Runch.jpg" width="500"
height="333" alt="Weiler Runch">
<figcaption>Der Weiler Runch</figcaption>
</figure>
<figure>
<img src="bilder500/Gerfalke.jpg" width="500"
height="333" alt="Gerfalke">
<figcaption>Gerfalke</figcaption>
</figure>
<figure>
<img src="bilder500/Wollkopfgeier.jpg" width="500"
height="333" alt="Wollkopfgeier">
<figcaption>Wollkopfgeier</figcaption>
</figure>
<figure>
<img src="bilder500/Lobiser-Schupfen.jpg" width="500"
height="333" alt="Lobiser-Schupfen">
<figcaption>Lobiser-Schupfen</figcaption>
</figure>
<div class="pause"></div>
</div>
Особенностью является 3D трансформация.
Свойство “perspective”, добавляет преобразованиям CSS3 иллюзию глубины и объёма. Значение в 2000 пикселей, соответствует телеперспективе и чем меньше значение, тем больше широкоугольная точка зрения. Кроме того, должно быть указано значение в родительском элементе . И поэтому всем вложенным элементам, также отображающимся в трех измерениях, необходимо свойство “transform-style: preserve-3d”.
В этом примере, тени и рамки непосредственно связаны с изображениями.
Ниже перечислены все инструкции в CSS3 для этого примера.
#stapel {
position: relative;
height: 23em;
width: 31.25em;
margin: 3em auto;
cursor: pointer;
perspective: 1500px;
transform-style: preserve-3d;
}
#stapel img {
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel figure {
position: absolute;
margin: 0;
height: 20.8em;
width: 31.25em;
opacity: 0;
}
#stapel figcaption {
position: relative;
overflow: hidden;
color: #fff;
font: 1.1em/2.5 Verdana, Arial, serif;
letter-spacing: .1em;
text-align: center;
max-width: 380px;
margin: 0 auto;
bottom: 43px;
opacity: 0;
transition: 1s;
}
#stapel figcaption:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: .1em;
background: #fff;
content: '';
transition: transform .5s;
transform: translate3d(-100%,0,0);
}
#stapel:hover figcaption,
#stapel:hover figcaption:after {
opacity: 1;
transform: translate3d(0,0,0);
}
#stapel figure:nth-of-type(1) {
animation: bild 30s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
animation: bild 30s 6s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
animation: bild 30s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
animation: bild 30s 18s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
animation: bild 30s 24s ease-in-out infinite;
}
@keyframes bild {
6.66% {opacity:1; z-index:3;
transform:rotateY(0deg) translateZ(253px);}
20% {opacity:1; z-index:4;
transform:rotateY(0deg) translateZ(253px);}
26.66% {opacity:1; z-index:2;
transform:rotateY(-90deg) translateZ(250px);}
26.67%, 100% {opacity:0; z-index:1;
transform:rotateY(90deg) translateZ(250px);}
0% {opacity:1; z-index:1;
transform:rotateY(90deg) translateZ(261px);}
}
В правилах “@keyframes” определяется вращение изображений. С “transform: translateZ(250px)” изображение увеличивается в перспективе по оси Z . Для функции времени выбрано “animation: ease-in-out”, чтобы на короткое время куб всегда останавливался.
Вертикальный трёхмерный куб-слайдер
Для того, чтобы 3D куб вращался в вертикальной плоскости, необходимо заменить “transform: rotateY” на “transform: rotateX“. Оптимальные значения размера в «transform: translateZ( )” должны быть определены экспериментальным путём.
@keyframes bildw {
6.66% {opacity:1; z-index:3;
transform:rotateX(0deg) translateZ(170px);}
20% {opacity:1; z-index:4;
transform:rotateX(0deg) translateZ(175px);}
26.66% {opacity:1; z-index:2;
transform:rotateX(-90deg) translateZ(175px);}
26.67%, 100% {opacity:0; z-index:1;
transform:rotateX(90deg) translateZ(175px);}
0% {opacity:1; z-index:1;
transform:rotateX(90deg) translateZ(165px);}
}
Трехмерная Slider-карусель
Следующий 3D Slider в виде карусели.
Структура HTML5 снова точно такая, как и в первом примере. На этот раз, однако, анимировано 9 изображений. Размер изображений ограничен, из-за недостатка места, шириной в 210Pixel.
В CSS3 для этого примера используется только одно правило “@keyframes“, правда, с небольшим недостатком: изображения будут появляться в первом цикле последовательно. И только после прохождения первого цикла с 36-секундными интервалом, “3D карусель” станет полностью круглой, но зато очень хорошо видно структуру слайдера. В функции времени, в отличии от куб-слайдера, выбрано значение “animation: linear“, что бы карусель не останавливалась.
CSS3 для этого 3D слайдера выглядит следующим образом:
#stapel1 {
position: relative;
height: 20em;
width: 44.5em;
margin: 1em -1em;
cursor: pointer;
perspective: 1000px;
transform-style: preserve-3d;
background: #aaa;
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel1 img {
border: 5px solid #eee;
box-shadow: 1px 1px 5px 2px #777;
}
#stapel1 figure {
position: absolute;
margin: 0;
width: 13.75em;
height: 9.375em;
left: 15.4em;
top: 5em;
opacity: 0;
}
#stapel1 figcaption {
position: absolute;
color: #444;
font-size: .7em;
letter-spacing: .1em;
word-spacing: .1em;
text-align: center;
line-height: 1.25em;
background: rgba(255, 255, 255, .7);
border: 1px solid #fff;
box-shadow: 1px 1px 5px 2px #777;
width: 18.5em;
height: 1.25em;
top: 155px;
left: 5px;
opacity: 0;
transition: 1s;
}
#stapel1:hover figcaption {
opacity: 1;
}
#stapel1 figure:nth-of-type(1) {
animation: bild1 36s linear infinite;
}
#stapel1 figure:nth-of-type(2) {
animation: bild1 36s 4s linear infinite;
}
#stapel1 figure:nth-of-type(3) {
animation: bild1 36s 8s linear infinite;
}
#stapel1 figure:nth-of-type(4) {
animation: bild1 36s 12s linear infinite;
}
#stapel1 figure:nth-of-type(5) {
animation: bild1 36s 16s linear infinite;
}
#stapel1 figure:nth-of-type(6) {
animation: bild1 36s 20s linear infinite;
}
#stapel1 figure:nth-of-type(7) {
animation: bild1 36s 24s linear infinite;
}
#stapel1 figure:nth-of-type(8) {
animation: bild1 36s 28s linear infinite;
}
#stapel1 figure:nth-of-type(9) {
animation: bild1 36s 32s linear infinite;
}
@keyframes bild1 {
0% {opacity: 1; z-index:5;
transform:rotateY(0deg) translateZ(315px);}
11.11% {opacity: .9; z-index:4;
transform:rotateY(40deg) translateZ(315px);}
22.22% {opacity: .7; z-index:3;
transform:rotateY(80deg) translateZ(315px);}
33.33% {opacity: .5; z-index:2;
transform:rotateY(120deg) translateZ(315px);}
44.44% {opacity: .3; z-index:1;
transform:rotateY(160deg) translateZ(315px);}
55.56% {opacity: .3; z-index:1;
transform:rotateY(200deg) translateZ(315px);}
66.67% {opacity: .5; z-index:2;
transform:rotateY(240deg) translateZ(315px);}
77.78% {opacity: .7; z-index:3;
transform:rotateY(280deg) translateZ(315px);}
88.89% {opacity: .9; z-index:4;
transform:rotateY(320deg) translateZ(315px);}
100% {opacity: 1; z-index:5;
transform:rotateY(360deg) translateZ(315px);}
}
#stapel1:hover figure {
animation-play-state: paused;
}
При выборе значений “transform: rotateY” и “transform: translateZ” можно использовать значения в процентах между 11,11% и 88,89%, потому, что значения в “transform: rotateY” увеличиваются равномерно от 0deg до 360deg и значение “transform: translateZ” остаётся неизменным. Также пропустить указание значения “opacity“, если непрозрачность должна изменяться равномерно. Для этого необходимо установить непрозрачность при 50% на 0,3.
Определение “z-index“, однако, необходимо для отображения изображения на переднем и на заднем плане при любых процентах.
@keyframes bild1 {
0% {opacity: 1; z-index:5;
transform:rotateY(0deg) translateZ(315px);}
11.11% {opacity: .9; z-index:4;}
...
88.89% {opacity: .9; z-index:4;}
100% {opacity: 1; z-index:5;
transform:rotateY(360deg) translateZ(315px);}
}
Расчет смещения в глубину “transform: translateZ” происходит следующим образом:
Ширина каждого изображения, включая рамки, 220 пикселей, и каждое изображение поворачивается на 40 градусов по отношению к следующему изображению.
Расчет наиболее важных размеров, времени и углов.<
В скобках указаны значения для трехмерной Карусели:
A: Количество изображений (9)
D: Время для смены кадра (4 секунды)
G = D * A: Общее время анимации (36 секунд)
S = G / A: Задержка времени старта (4 секунды)
– – – – – – – – – – – – – – – – – – – – – – – – – – – – –
V: Полный угол карусели 360°
Y = V / A Повышение “transform: rotateY” (40° или 40deg)
– – – – – – – – – – – – – – – – – – – – – – – – – – – – –
B: Ширина изображения (210 Pixel)
H: Высота изображения (140 Pixel)
R: Рамка изображения (5Pixel)
#stapel1 img {border: 5px solid #eee}
w: Ширина изображения включая рамку (220 Pixel или 13,75em)
#stapel1 figure {width: 13,75em}
h: Высота изображения включая рамку (150 Pixel или 9,375em)
#stapel1 figure {height: 9.375em}
Тангенс в прямоугольном треугольнике:
tan α = противоположная сторона / смежная сторона
tan(Y / 2) = (w / 2) / Z
Z = (w / 2) / tan(Y / 2) = 110Pixel / tan(20°) = 302 Pixel
Выставляем глубину “transform: translateZ“, в 315 пикселей, и тем самым получаем небольшой зазор между изображениями около 4,6 пикселей.
Трехмерная Slider-карусель с движением по часовой стрелке
Что бы изменить направление вращения 3D карусели в другую сторону, необходимо лишь заменить правило “@keyframes” с 0% на 100%.
@keyframes bild2 {
0% {opacity: 1; z-index:5;
transform:rotateY(360deg) translateZ(315px);}
...
100% {opacity: 1; z-index:5;
transform:rotateY(0deg) translateZ(315px);}
}
Трехмерная Slider-карусель со смещёнными картинками
В этой 3D-карусели изображения слегка смещены.
Для этого, в дополнение к глубине “transform: translateZ“, добавляется высота “transform: translateY” и это можно совместиь: “transform: translate3d(x,y,z)“. Непрозрачность установлена на 100%.
@keyframes bild3 {
0% {opacity: 1; z-index:5;
transform:rotateY(360deg) translate3d(0,150px,315px);}
11.11% {z-index:4;
transform:rotateY(320deg) translate3d(0,120px,315px);}
22.22% {z-index:3;
transform:rotateY(280deg) translate3d(0,90px,315px);}
33.33% {z-index:2;
transform:rotateY(240deg) translate3d(0,60px,315px);}
44.44% {z-index:1;
transform:rotateY(200deg) translate3d(0,30px,315px);}
55.56% {z-index:1;
transform:rotateY(160deg) translate3d(0,30px,315px);}
66.67% {z-index:2;
transform:rotateY(120deg) translate3d(0,60px,315px);}
77.78% {z-index:3;
transform:rotateY(80deg) translate3d(0,90px,315px);}
88.89% {z-index:4;
transform:rotateY(40deg) translate3d(0,120px,315px);}
100% {opacity: 1; z-index:5;
transform:rotateY(0deg) translate3d(0,150px,315px);}
}
Трехмерная Slider-карусель с наклонными картинками
>Еще лучше изображения выглядят, если они находятся под углом.
Для этого используется объект “transform: skewY” для наклона изображений по Y-оси. Затем, чтобы поместить изображения должным образом, вы должны оптимальные значения для “transform: skewY” и “transform: translate3d(x,y,z)” подобрать опытным путём.
@keyframes bild4 {
0% {opacity: 1; z-index:5; transform:rotateY(360deg)
skewY(0deg) translate3d(0,128px,315px);}
11.11% {z-index:4; transform:rotateY(320deg)
skewY(13deg) translate3d(0,100px,315px);}
22.22% {z-index:3; transform:rotateY(280deg)
skewY(12deg) translate3d(0,50px,315px);}
33.33% {z-index:2; transform:rotateY(240deg)
skewY(12deg) translate3d(0,0,315px);}
44.44% {z-index:1; transform:rotateY(200deg)
skewY(7deg) translate3d(0,-40px,315px);}
55.56% {z-index:1; transform:rotateY(160deg)
skewY(-7deg) translate3d(0,-40px,315px);}
66.67% {z-index:2; transform:rotateY(120deg)
skewY(-12deg) translate3d(0,0,315px);}
77.78% {z-index:3; transform:rotateY(80deg)
skewY(-12deg) translate3d(0,50px,315px);}
88.89% {z-index:4; transform:rotateY(40deg)
skewY(-13deg) translate3d(0,100px,315px);}
100% {opacity: 1; z-index:5; transform:rotateY(0deg)
skewY(0deg) translate3d(0,128px,315px);}
}
Вертикальная трехмерная Slider-карусель
А как насчет 3D карусели, которая вращается вертикально?
Для определения размера “transform: translateZ“, как основа выбрана высота изображений включая края в 150 пикселей. Должно получиться расчетное значение в 206 пикселей. И чтобы иметь зазор между изображениями, ставим значение в 215 пикселей. Значение “transform: rotateY” заменяем на “transform: rotateX” и получаем интересный 3D Slider.
@keyframes bild5 {
0% {opacity: 1; z-index:5;
transform:rotateX(360deg) translateZ(215px);}
11.11% {opacity: .9; z-index:4;}
22.22% {opacity: .7; z-index:3;}
33.33% {opacity: .5; z-index:2;}
44.44% {opacity: .3; z-index:1;}
55.56% {opacity: .3; z-index:1;}
66.67% {opacity: .5; z-index:2;}
77.78% {opacity: .7; z-index:3;}
88.89% {opacity: .9; z-index:4;}
100% {opacity: 1; z-index:5;
transform:rotateX(0deg) translateZ(215px);}
}
3D-карусель Slider в полукруге
#stapel6 img,
#stapel5 figcaption {
transform: rotateY(180deg);
}
@keyframes bild6 {
0% {opacity: 0; z-index:2;
transform:rotateY(280deg) translateZ(315px);}
11.11% {opacity: 1; z-index:2;}
44.44% {opacity: 1; z-index:2;}
55.56% {opacity: 0; z-index:1;}
77.78% {opacity: 0; z-index:1;
transform:rotateY(0deg) translateZ(315px);}
100% {opacity: 0; z-index:1;
transform:rotateY(320deg) translateZ(315px);}
}
See the Pen 3D-карусель Slider в полукруге by vavik (@vavik96) on CodePen.
3D-карусель Slider с вращением по кругу
В этом случае, “transform: rotateY” заменяем на “transform: rotate3d(0,1,1,360deg)” и непрозрачность установливаем на постоянном уровне в 100%.
Этот эффект, однако, не работает с Internet Explorer.
@keyframes bild7 {
0% {opacity: 1; z-index:5;
transform:rotate3d(0,1,1,360deg) translate3d(0,0,315px);}
11.11% {z-index:4;}
22.22% {z-index:3;}
33.33% {z-index:2;}
44.44% {z-index:1;}
55.56% {z-index:1;}
66.67% {z-index:2;}
77.78% {z-index:3;}
88.89% {z-index:4;}
100% {opacity: 1; z-index:5;
transform:rotate3d(0,1,1,0deg) translate3d(0,0,315px);}
}
Как вы видите, немного фантазии и можно получить множество различных 3D-слайдеров даже без использования JavaScript.