832 C 3D трансформацией мы можем сделать простые элементы интересными, просто показав их в трехмерном пространстве.
Вместе с CSS transitions, эти элементы могут быть помещены в 3D пространство для создания реалистичного эффекта. Например, посмотрите на экспериментальную 3D галерею, выполненную с помощью CSS и jQuery.
Основная идея состоит в том, чтобы создать круговую галерею, где есть изображение по центру и два по бокам. Так как мы используем перспективу, то два боковых изображения отображаются немного повернутыми в трехмерном измерении.
Пожалуйста запомните, что пример будет работать только в тех браузерах, где есть поддержка CSS 3D трансформации.
Как это работает
Для создания структуры галереи будем использовать следующий HTML код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"> <img src="images/1.jpg" alt="image01"> <div>http://www.colazionedamichy.it/</div> </a> <a href="#"> <!-- ... --> </a> <!-- ... --> </div> <nav> <span class="dg-prev"><</span> <span class="dg-next">></span> </nav> </section> |
С помощью JS кода инициализируем галерею:
|
1 |
$('#dg-container').gallery(); |
Настройки
Доступны следующий параметры:
|
1 2 3 4 5 6 7 8 |
current : 0, // индекс текущего изображения autoplay : false, // слайдшоу on / off interval : 2000 // время между трансформациями |
Надеемся, эта галерея пригодится вам в проектах!
