3D постери за допомогою css3

lt;ul id="Movieposters"gt;lt;ligt;lt;img src="Images / 01_iron_man_2.jpg" alt="Залізна людина 3"gt;lt;div class="Movieinfo"gt;lt;h3gt; Залізна людина 3lt;/h3gt;lt;pgt; Коли світ Старка валиться на його очах з вини невідомих супротивників, Тоні ...lt;/pgt;lt;a href="#" title="Залізна людина 3"gt; Детальнішеlt;/agt;lt;/divgt;lt;/ligt;lt;ligt;lt;img src="Images / 02_the_last_airbender.jpg" alt="Володар стихій"gt;lt;div class="Movieinfo"gt;lt;h3gt; Повелитель стихійlt;/h3gt;lt;pgt; Повітряні кочівники, Плем`я Води, Царство Землі і Народ Вогню. Чотири нації були пов`язані долею, коли Народ Вогню ...lt;/pgt;lt;a href="#" title="Володар стихій"gt; Детальнішеlt;/agt;lt;/divgt;lt;/ligt;lt;ligt;lt;img src="Images / 03_tron_legacy.jpg" alt="Трон спадщина»gt;lt;div class="Movieinfo"gt;lt;h3gt; Трон спадщинаlt;/h3gt;lt;pgt; Сем Флінн дуже обдарований 27-річний хлопець, прекрасно розбирається втехніческіх засобах. Його батько Кевін Флінн загадково зникає ...lt;/pgt;lt;a href="Http://imdb.com/title/tt1104001/" title="Трон спадщина"gt; Детальнішеlt;/agt;lt;/divgt;lt;/ligt;lt;/ulgt;

#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-}