3D постеры в виде боксов

3D постеры в виде боксов

При работе со свойствами 3D трансформации можно заметить что не имеют никакой тени и можно подумать что они плоские. Для эффекта объема можно задать зеркальное отражение или тень. А также при наведении курсора мыши изображение будет поворачиваться но не полностью. Мы не будем использовать Javascript код чтобы создать данный эффект, а воспользуемся лишь возможностями CSS3.

Урок, в котором мы также создавали 3D постеры 3D постеры с помощью CSS3.

Реальный пример можно увидеть здесь:

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

HTML часть

Нам необходимо расположить на странице несколько частей постера: переднюю часть, в виде основного изображения, и часть, которая появляется при наведении, она будет с изображением и текстом:

1 2 3 4 5 6 7 &lt,div class=wrapper&gt, &lt,ul class=stage&gt, &lt,li class=scene&gt,&lt,/li&gt, &lt,li class=scene&gt,&lt,/li&gt, &lt,li class=scene&gt,&lt,/li&gt, &lt,/ul&gt, &lt,/div&gt,

Сейчас более подробно рассмотрим из чего состоит элемент &lt,li&gt,:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 &lt,li class=scene&gt, &lt,div class=movie&gt, &lt,div class=poster&gt,&lt,/div&gt, &lt,div class=info&gt, &lt,header&gt, &lt,h1&gt,Железный человек 3&lt,/h1&gt, &lt,span class=year&gt,2013&lt,/span&gt, &lt,span class=rating&gt,PG&lt,/span&gt, &lt,span class=duration&gt,131 минута&lt,/span&gt, &lt,/header&gt, &lt,p&gt, Когда мир Старка рушится на его глазах по вине неизвестных противников, Тони жаждет найти виновных и свести с ними счеты. Оказавшись в безвыходной ситуации, Старк может рассчитывать только на себя и свою изобретательность, чтобы защитить тех, кто ему дорог. &lt,/p&gt, &lt,/div&gt, &lt,/div&gt, &lt,/li&gt,

CSS часть

Первым делом расположим все постеры по центру и уберем стиль умолчанию для элементов ненумерованного списка:

1 2 3 4 5 6 7 8 9 .wrapper margin: 0 auto 100px auto, max-width: 960px, .stage list-style: none, padding: 0,

Далее пропишем свойства для изображений и блоков которые поворачиваются:

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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 .scene width: 260px, height: 400px, margin: 30px, float: left, -webkit-perspective: 1000px, -moz-perspective: 1000px, perspective: 1000px, .movie width: 260px, height: 400px, -webkit-transform-style: preserve-3d, -moz-transform-style: preserve-3d, transform-style: preserve-3d, -webkit-transform: translateZ-130px, -moz-transform: translateZ-130px, transform: translateZ-130px, -webkit-transition: -webkit-transform 350ms, -moz-transition: -moz-transform 350ms, transition: transform 350ms, .movie:hover -webkit-transform: rotateY-78deg translateZ20px, -moz-transform: rotateY-78deg translateZ20px, transform: rotateY-78deg translateZ20px, .movie .poster, .movie .info position: absolute, width: 260px, height: 400px, background-color: #fff, -webkit-backface-visibility: hidden, -moz-backface-visibility: hidden, backface-visibility: hidden, .movie .poster -webkit-transform: translateZ130px, -moz-transform: translateZ130px, transform: translateZ130px, background-size: cover, background-repeat: no-repeat, .movie .info -webkit-transform: rotateY90deg translateZ130px, -moz-transform: rotateY90deg translateZ130px, transform: rotateY90deg translateZ130px, border: 1px solid #B8B5B5, font-size: 0.75em, .csstransforms3d .movie::after content: ”, width: 260px, height: 260px, position: absolute, bottom: 0, box-shadow: 0 30px 50px rgba0,0,0,0.3, -webkit-transform-origin: 100% 100%, -moz-transform-origin: 100% 100%, transform-origin: 100% 100%, -webkit-transform: rotateX90deg translateY130px, -moz-transform: rotateX90deg translateY130px, transform: rotateX90deg translateY130px, -webkit-transition: box-shadow 350ms, -moz-transition: box-shadow 350ms, transition: box-shadow 350ms, .csstransforms3d .movie:hover::after box-shadow: 20px -5px 50px rgba0,0,0,0.3, .movie .poster, .movie .info, .movie .info header -webkit-transition: box-shadow 350ms, -moz-transition: box-shadow 350ms, transition: box-shadow 350ms, .csstransforms3d .movie .poster box-shadow: inset 0px 0px 40px rgba255,255,255,0, .csstransforms3d .movie:hover .poster box-shadow: inset 300px 0px 40px rgba255,255,255,0.8,

И последнее добавим изображения для постеров:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .scene:nth-child1 .movie .poster background-image: url../img/poster01.jpg, .scene:nth-child2 .poster background-image: url../img/poster02.jpg, .scene:nth-child3 .poster background-image: url../img/poster03.jpg, .scene:nth-child1 .info header background-image: url../img/still01.jpg, .scene:nth-child2 .info header background-image: url../img/still02.jpg, .scene:nth-child3 .info header background-image: url../img/still03.jpg,

Для браузеров которые не поддерживают 3D трансформации мы используем библиотеку Modernizr.js, которая может определить поддерживается то или иное свойство более старым браузерам.

Вывод

Готовые постеры для вашего сайта, вам лишь осталось взять исходники и переделать их под себя.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: