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

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

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 например.

Успехов!



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

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