<ul id="movieposters">
<li>
<img src="images/01_iron_man_2.jpg" alt="Iron Man 2" />
<div class="movieinfo">
<h3>Iron Man 2</h3>
<p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
<a href="#" title="Iron Man 2">More info</a>
</div>
</li>
<!-- Следующие киноафиши -->
</ul>

/* Элементы списка. Обратите внимание на свойство -perspective. Мы сделали так, чтобы свойство -transform-style правильно преобразовывало элемент info вместо с родительским элементом. Свойство перехода использовано для анимации. */
#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; }

/* Мы используем свойство трансформации, чтобы усилить эффект трехмерности, добавляя эффект поворота. Мы также добавим теней, чтобы придать еще больше глубины. Еще мы сделаем событие rotateY анимированным с помощью переходов для изображения. * / #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); }

/* Для блока с информацией о фильме мы делаем примерно то же, что и для изображения. Однако, мы также используем дополнительные свойства CSS, такие как расположение, внешние отступы и т. п., чтобы разместить его в нужном месте. Обратите внимание на свойства translateZ и rotateY, усиливающие эффект трехмерности. */
.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; }
/* Базовый CSS для информации о фильме. */
.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; }