html - 亚马逊翻书 CSS 动画 : how is it coded?

Question

Link to example. Hover over the book on the left side

如您所见，这本书似乎是面向用户打开的。我已经有了动画的第一部分:JSFiddle

HTML:

<h1>Boek opendoen animatie</h1>

<div class="achtergrond">
        <img class="foto" src="http://i.imgur.com/u19t6iW.jpg" alt="Cover">
</div>

</body>
</html>

CSS:

div.achtergrond {
    background-color: black;
    width: 250px;
    height: 376px;

}
img.foto {
    width: 250px;
    height: auto;

    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
/*    -webkit-transform-origin: 0 0;*/
}

img.foto:hover {
/*    -webkit-transform: scaleX(1.5)*/
    -webkit-transform: matrix3d(0.8660254, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.8660254, 0, 0, 0, 0, 1);
}

现在这似乎并没有放大书的右 Angular ，所以封面看起来不像是面向用户的。

我试过-webkit-perspective, transform-style,...但似乎无法获得预期的效果。

Answer 1

在图像悬停上试试这个 css

transform: rotateY(-20deg); 
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);