Урок посвящен созданию 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: rotateY30deg, -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: rotateY0deg, .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: translateZ30px rotateY30deg, -webkit-transition-property: transform, box-shadow, margin, -webkit-transition-duration: 0.5s, #movieposters li:hover .movieinfo -webkit-transform: rotateY0deg, -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 например.
Успехов!