Лого SiteHere.ru

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

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

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

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

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

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



HTML часть

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

1
2
3
4
5
6
7
<div class="wrapper">
  <ul class="stage">
    <li class="scene"></li>
    <li class="scene"></li>
    <li class="scene"></li>
  </ul>
</div>

Сейчас более подробно рассмотрим из чего состоит элемент <li>:

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


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) translateZ(20px);
    -moz-transform: rotateY(-78deg) translateZ(20px);
    transform: rotateY(-78deg) translateZ(20px);
}
 
.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: translateZ(130px);
    -moz-transform: translateZ(130px);
    transform: translateZ(130px);
    background-size: cover;
    background-repeat: no-repeat;
}
 
.movie .info {
    -webkit-transform: rotateY(90deg) translateZ(130px);
    -moz-transform: rotateY(90deg) translateZ(130px);
    transform: rotateY(90deg) translateZ(130px);
    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 rgba(0,0,0,0.3);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotateX(90deg) translateY(130px);
    -moz-transform: rotateX(90deg) translateY(130px);
    transform: rotateX(90deg) translateY(130px);
    -webkit-transition: box-shadow 350ms;
    -moz-transition: box-shadow 350ms;
    transition: box-shadow 350ms;
}
 
.csstransforms3d .movie:hover::after {
    box-shadow: 20px -5px 50px rgba(0,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 rgba(255,255,255,0);
}
 
.csstransforms3d .movie:hover .poster {
    box-shadow: inset 300px 0px 40px rgba(255,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-child(1) .movie .poster {
  background-image: url(../img/poster01.jpg);
}
 
.scene:nth-child(2) .poster {
  background-image: url(../img/poster02.jpg);
}
 
.scene:nth-child(3) .poster {
  background-image: url(../img/poster03.jpg);
}
 
.scene:nth-child(1) .info header {
  background-image: url(../img/still01.jpg);
}
 
.scene:nth-child(2) .info header {
  background-image: url(../img/still02.jpg);
}
 
.scene:nth-child(3) .info header {
  background-image: url(../img/still03.jpg);
}

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



Вывод

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


Успехов!

Источник: tympanus.net

2 комментария к записи
  • Сергей Тарасенко

    Постеры хорошие,но IE их вообще видеть не хотел… =(

     

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

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