Лого www.SiteHere.ru

3D постеры с помощью CSS3

3D постеры с помощью CSS3

Урок посвящен созданию 3D постеров прибегая лишь к помощь CSS3.

Действительно красивый эффект, который достигается лишь с помощью CSS3. Это технология будущего, она по-настоящему мощная. Здесь нет никаких JS-скриптов. Данный способ изобрел — Marco Kuiper. С примером вы можете познакомиться ниже, а также увидеть живой пример работы данного метода:

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

Сейчас рассмотрим более подробно как сделать 3D постеры. Для начала в HTML код:

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
<ul id="movieposters">
    <li>
        <img src="images/01_iron_man_2.jpg" alt="Железный человек 3">
        <div class="movieinfo">
            <h3>Железный человек 3</h3>
            <p>Когда мир Старка рушится на его глазах по вине неизвестных противников, Тони...</p>
            <a href="#" title="Железный человек 3">Подробнее</a>
        </div>
    </li>
    <li>
        <img src="images/02_the_last_airbender.jpg" alt="Повелитель стихий">
        <div class="movieinfo">
            <h3>Повелитель стихий</h3>
            <p>Воздушные кочевники, Племя Воды, Царство Земли и Народ Огня. Четыре нации были связаны судьбой, когда Народ Огня...</p>
            <a href="#" title="Повелитель стихий">Подробнее</a>
        </div>
    </li>
    <li>
        <img src="images/03_tron_legacy.jpg" alt="Трон наследие">
        <div class="movieinfo">
            <h3>Трон наследие</h3>
                <p>Сэм Флинн очень одарённый 27-летний парень, прекрасно разбирающийся в 
                технических средствах. Его отец Кевин Флинн загадочно исчезает...</p>
            <a href="http://www.imdb.com/title/tt1104001/" title="Трон наследие">Подробнее</a>
        </div>
    </li>
</ul>

А сейчас для изображений и текста зададим стили:

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
#movieposters { 
    list-style:none; 
    margin:100px 0; 
    height:550px; 
}
 
#movieposters li {
    display:inline; 
    float:left;
    -webkit-perspective: 500; 
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: perspective; 
    -webkit-transition-duration: 0.5s; 
}
 
#movieposters li:hover {
    -webkit-perspective: 5000;
}
 
#movieposters li img { 
    border:10px solid #fcfafa; 
    -webkit-transform: rotateY(30deg);
    -moz-box-shadow:0 3px 10px #888; 
    -webkit-box-shadow:0 3px 10px #888;
    -webkit-transition-property: transform; 
    -webkit-transition-duration: 0.5s; 
}
 
#movieposters li:hover img { 
    -webkit-transform: rotateY(0deg); 
}
 
.movieinfo { 
    border:10px solid #fcfafa; 
    padding:20px; width:200px; 
    height:180px; 
    background-color:#deddcd; 
    margin:-195px 0 0 55px; 
    position:absolute;
    -moz-box-shadow:0 20px 40px #888; 
    -webkit-box-shadow:0 20px 40px #888;
    -webkit-transform: translateZ(30px) rotateY(30deg);
    -webkit-transition-property: transform, box-shadow, margin; 
    -webkit-transition-duration: 0.5s; 
}
 
#movieposters li:hover .movieinfo { 
    -webkit-transform: rotateY(0deg); 
    -webkit-box-shadow:0 5px 10px #888; 
    margin:-175px 0 0 30px;
}
 
.movieinfo h3 { 
    color:#7a3f3a; 
    font-variant: small-caps; 
    font-family:Georgia,serif,Times; 
    text-align:center;
    padding-bottom:15px; 
}
 
.movieinfo p { 
    padding-bottom:15px; 
}
 
.movieinfo a { 
    background-color:#7a3f3a; 
    padding:5px 10px; 
    color:#eee; 
    text-decoration:none; 
    display:block; 
    width:80px; 
    text-align:center;
    margin:0 auto;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
 
.movieinfo a:hover, .movieinfo a:focus { 
    background-color:#6a191f; 
    color:#fff;
}

К сожалению вы увидите данный эффект, только если у вас браузер последней версии. Mozilla 22.0 не покажет так как надо. Для того чтобы увидеть эту красоту лучше зайти через Google Chrome например.

Успехов!

3D постеры с помощью CSS3 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

    Класс! Особенно учитывая многофункциональное применение этой фичи, Вы сделали действительно бесценный подарок для дизайнеров! Огромный респект, и как раз вовремя))) мне для одного сайта очень пригодится!

     
  • Вереск

    Отличная штука,!!! Респект Вам и уважуха, наконец-то всё меньше и меньше явы можно использхоывать, огромное спасибо!

     
  • Liudmila

    Thank you very much .Liudmila. Super .

     

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

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