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

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

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