Создание анимированной галереи изображений с использованием CSS3

1 сентября 2015 | Опубликовано в css | 13 Комментариев »

В этом уроке мы покажем интересные возможности CSS3. Мы создадим трехмерную галерею изображений с помощью свойств трансформаций CSS3 для движка WebKit. В демонстрации Вы увидите свободно летающий трехмерный объект с фотографиями. Наш пример работает только в браузерах, использующих движок WebKit, таких как Chrome, Safari и Opera.

Вот демонстрация работы и исходный код:

Демонстрация работы – Скачать исходный код

Скачайте пример, и начнем.

Шаг 1. Код HTML

Сначала создадим основную разметку HTML. Как Вы видите, структура довольно минималистична и содержит только несколько блоков и элементов изображений.
index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Photo Slider | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>CSS3 Animated Photo Slider</h2>
<a href="http://www.script-tutorials.com/css3-animated-photo-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="slider">
<div class="x_rot">
<div class="y_rot">
<div id="i1">
<img src="images/1.jpg" />
</div>
<div id="i2">
<img src="images/2.jpg" />
</div>
<div id="i3">
<img src="images/3.jpg" />
</div>
<div id="i4">
<img src="images/4.jpg" />
</div>
<div id="i5">
<img src="images/5.jpg" />
</div>
<div id="i6">
<img src="images/6.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>

Шаг 2. Код CSS

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

css/slider.css

/* Анимации с ключевыми кадрами */
@-webkit-keyframes x_rot {
0%    { -webkit-transform: rotateX(-30deg); }
50%   { -webkit-transform: rotateX(30deg); }
100%  { -webkit-transform: rotateX(-30deg); }
}
@-webkit-keyframes y_rot {
0%    { -webkit-transform: rotateY(0deg); }
50%   { -webkit-transform: rotateY(180deg); }
100%  { -webkit-transform: rotateY(360deg); }
}

/* основные стили */
.slider {
margin: 250px auto;

-webkit-perspective: 1000; /* задаем перспективу относительно родителя */
}
.x_rot {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: x_rot; /* задаем особые анимации */
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease;
}
.y_rot {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: y_rot; /* задаем особые анимации */
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.y_rot div {
color: rgba(0,0,0,0.9);
height: 235px;
left: 300px;
opacity: 0.8;
position: absolute;
width: 235px;

-webkit-border-radius: 15px;
-webkit-transition: .3s;
}
.y_rot div#i1 {
-webkit-transform: rotateY(0deg) translateZ(200px);
}
.y_rot div#i2 {
-webkit-transform: rotateY(60deg) translateZ(200px);
}
.y_rot div#i3 {
-webkit-transform: rotateY(120deg) translateZ(200px);
}
.y_rot div#i4 {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
.y_rot div#i5 {
-webkit-transform: rotateY(240deg) translateZ(200px);
}
.y_rot div#i6 {
-webkit-transform: rotateY(300deg) translateZ(200px);
}
.y_rot div img {
height:235px;
width:235px;

-webkit-border-radius: 15px;
-webkit-transition: .3s;
}

/* эффект при наведении указателя мыши */
.y_rot div#i1:hover,
.y_rot div#i2:hover,
.y_rot div#i3:hover,
.y_rot div#i4:hover,
.y_rot div#i5:hover,
.y_rot div#i6:hover {
opacity: 1;
}
.y_rot div#i1:hover img,
.y_rot div#i2:hover img,
.y_rot div#i3:hover img,
.y_rot div#i4:hover img,
.y_rot div#i5:hover img,
.y_rot div#i6:hover  img{
height:335px;
width:335px;
margin-left:-50px;
margin-top:-50px;
}
/* останавливаем основную анимацию при наведении указателя мыши */
.x_rot:hover {
-webkit-animation-play-state: paused;
}
.y_rot:hover {
-webkit-animation-play-state: paused;
}

В этот раз код для разметки страницы из файла layout.css не будет рассматриваться. В этом случае он не особо важен. Этот файл можно скачать в архиве с исходным кодом.

Демонстрация работы – Скачать исходный код

Заключение

В этом уроке мы создали восхитительную галерею изображений с помощью CSS3. В нашем примере мы использовали только свойства анимации с трехмерными трансформациями CSS3 с приставкой производителя -webkit, так что он будет работать только в браузерах на движке WebKit, таких как Chrome, Safari и Opera. Но можно с помощью других приставок производителей создать подобные эффекты и для других современных версий браузеров.

Автор урока Andrew Prikaznov

Перевод — Дежурка

Смотрите также:

Опубликовано в css, сентября 1, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Создание анимированной галереи изображений с использованием CSS3

Шаг 1. Код HTML

Шаг 2. Код CSS

Заключение

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые