Последние:

Vavik96

Интернет-дайджест для вебмастеров и фотографов.

Web 

3D слайдер с CSS3 переходами и ключевыми кадрами анимации.

admin 3 комментария , ,

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);}
}

screenshot2015-04-12 10-28-33

 

 

Трехмерная 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);}
}

screenshot2015-04-12 10-29-25

 

Трехмерная 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);}
}

screenshot2015-04-12 10-30-01

 

Вертикальная трехмерная 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);}
}

screenshot2015-04-12 10-30-43

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);}
}

screenshot2015-04-12 10-31-52

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);}
}

screenshot2015-04-12 10-32-31

Как вы видите, немного фантазии и можно получить множество различных 3D-слайдеров  даже без использования JavaScript.

Оригинал / Перевод

Вам также может понравиться

Как реализовать закругление углов не используя при этом изображения?

admin 0

Инструменты форматирования, организации и приведения в порядок кода CSS

admin 0

Готов ли ваш сайт к отражению атак?

admin 0

3 thoughts on “3D слайдер с CSS3 переходами и ключевыми кадрами анимации.”

  • Руслан
    01/08/2017 в 11:49
    Permalink

    Здравствуйте! Что-то не совсем я понял что и как сделать чтоб на сайте было 3D-карусель Slider в полукруге. Какой код html?

    Ответ
    • adminАвтор записи
      01/08/2017 в 15:56
      Permalink

      Здравствуйте, html тот же самый, изменяется только CSS.
      Добавил в статью и этот пример, вот прямая ссылка https://codepen.io/vavik96/pen/NvNVKN
      Нажмите кнопку “html” скопируйте код и пользуйтесь :)

      Ответ
    • Руслан
      02/08/2017 в 19:28
      Permalink

      Спасибо большое за ответ! Все теперь ясно.

      Ответ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.