Exore LTD » CSS3 » 3D преобразования и анимация CSS — Урок 2. Карусель новостей
Лого SiteHere.ru

Ноябрь 21, 2014 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

3D преобразования и анимация CSS — Урок 2. Карусель новостей

3D преобразования и анимация CSS - Урок 2. Карусель новостей

Продолжаем изучать анимацию, которую можно создать с помощью технологии CSS3. Напомню, что в отличие от прошлой серии уроков посвященных анимации с помощью CSS преобразований, здесь мы рассматриваем анимацию с помощью ключевых кадров и 3D преобразований. Она немного сложнее, чем в прошлых уроках, но и смотрится эффектнее. Перед изучением данного урока рекомендую обязательно изучить предыдущий урок, где мы создавали анимацию вращения изображения вокруг оси Y. Там, на простом примере, я рассмотрел как создается анимация с помощью ключевыми кадрами.

На предыдущую статью из данного урока можно попасть перейдя по ссылке ниже:

Браузеры Internet Explorer 10 и 11 не поддерживают свойство preserve-3d, поэтому в этих браузерах вы не увидите 3D эффекта.

Карусель новостей — Пример

Анимация, которую мы создадим будет содержать в себе изображение внутри ссылок, которые вращаются вокруг оси Y:

Посмотреть примерСкачать

На каждое изображение можно нажать и вы попадете на соответствующую статью на сайте.

Если вы не видите в вашем браузере галерею фотографий — смотрите видео ниже как это должно выглядеть:

Структура HTML

Давайте посмотрим что и как устроено внутри.

Для начала обратите внимание HTML:

1
2
3
4
5
6
7
8
9

<div class="stage" style="margin:150px auto; height: 142px; width:500px">
    <div class="spinner" style="-webkit-transform-origin: 180px 0 0; -moz-transform-origin: 180px 0 0; -ms-transform-origin: 180px 0 0;transform-origin: 180px 0 0; ">
        <a href="https://sitehere.ru/3d-preobrazovaniya-i-animacii" target="_blank" title="3D преобразования и анимация CSS — Урок 1. Вращение"><img style="-webkit-transform: rotateY(0deg) translateX(180px);-moz-transform: rotateY(0deg) translateX(180px); transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="https://sitehere.ru/wp-content/uploads/2014/10/image1.jpg" width="200" height="130" alt=""></a>
        <a href="https://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-3-prodvinutaya-animaciya" target="_blank" title="Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация"><img style="-webkit-transform: rotateY(-72deg) translateX(180px); -moz-transform: rotateY(-72deg) translateX(180px);transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px;" src="image2.jpg" width="213" height="130" alt=""></a>
        <a href="https://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-2-realnyj-primer" target="_blank" title="Анимация с помощью CSS преобразований. Часть 2 — реальный пример"><img style="-webkit-transform: rotateY(-144deg) translateX(180px); -moz-transform: rotateY(-144deg) translateX(180px);transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="image3.jpg" width="240" height="130" alt=""></a>
        <a href="https://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-1-vvedenie" target="_blank" title="Анимация с помощью CSS преобразований. Часть 1 — введение"><img style="-webkit-transform: rotateY(-216deg) translateX(180px); -moz-transform: rotateY(-216deg) translateX(180px); transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="image4.jpg" width="213" height="130" alt=""></a>
        <a href="https://sitehere.ru/animirovannye-shapki-dlya-sajta" target="_blank" title="Анимированные шапки для сайта"><img style="-webkit-transform: rotateY(-288deg) translateX(180px); -moz-transform: rotateY(-288deg) translateX(180px); transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="image5.jpg" width="238" height="130" alt=""></a>
    </div>
</div>

Если это записать еще проще, тогда получится следующий код:

1
2
3
4
5
6

<div class="stage">
    <div class="spinner">
        <a><img></a>
        <!-- еще ссылки с изображениями -->
    </div>
</div>

Остался лишь CSS

Код будет очень похожим, как и в прошлом уроке. Поэтому рекомендую его изучить, если вы еще этого не сделали.

Давайте посмотрим на весь CSS целиком:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/* Стили для контейнера каруселью */
.stage {
    margin: 1em auto;
    -webkit-perspective: 1200px; 
    -moz-perspective: 1200px; 
    perspective: 1200px;
} 
 
/* "Связываем" контейнер с ключевыми кадрами и задаем ее настройки */
.spinner {
    -webkit-animation-name: spinner; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 6s; 
 
    animation-name: spinner; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 6s;
 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
 
/* Останавливаем вращение при наведении */
.spinner:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
} 
 
/* Стили для каждого изображения */
.spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
 
/* Ключевые кадры -  WebKit браузеры */
@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
} 
 
/* Ключевые кадры - Все остальные браузеры */ 
@keyframes spinner { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg);
    } 
}

Как видите, ключевые кадры здесь такие же как в прошлом уроке.



Вывод

Интересный способ показа своих новостей на сайте. Но это я использовал для показа новостей — вы же можете таким образом показать просто изображения и использовать эту карусель как необычную галерею.

Экспериментируя с различными параметрами вы можете подобрать ту скорость и угол (перспективу), которая вас устраивает. Ничего сложного — вам лишь нужно изменять параметры и смотреть в браузере что получается. Так вы намного быстрее поймете что и за что отвечает.

Следующий урок будет о том, как создать вращающийся куб, который будет поворачиваться по определенному алгоритму.


Успехов!

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

5 комментариев к записи
  • Юрий

    Восхитительно. Я смогу это вставить в сайдбар?

     
    Ответить
  • Ян

    Не плохо, но как-то трудно представить куда его можно применить.

     
    Ответить
  • Николай

    Спасибо за классную анимацию, но, к сожалению, она не корректно работает в FireFox'е — не все лепестки отображаются. Можно ли как-нибудь это побороть? (В других браузерах работает корректно)

     
    Ответить
  • Аарон

    очень интересные эффекты. Спасибо. К сожаление нет доступа к странице книги «Как раскрутить сайт с нуля до 32 000 посетителей в месяц» Можно ли как минимум узнать ее содержание?

     
    Ответить
    • Юрий Немец

      Добрый день!
      Вы можете скачать ее здесь.

       
      Ответить

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

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