亚马逊翻书CSS动画：它是如何编码的？

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

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

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

Answer 1

在图像悬停时尝试此 css

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

Answer 2

我找到了解决此问题的方法。我之前尝试过 perspective 和 perspective-origin 选项，但没有将它们放在正确的位置。这些选项必须放在父元素中（这里是 "achtergrond"-div）。

参见 w3schools 引用

When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

因此新的CSS是：

div.achtergrond {
    background-color: black;
    width: 250px;
    height: 376px;
    -webkit-perspective: 250px; /* Chrome, Safari, Opera */
    -webkit-perspective-origin: 100% 30%; /* Chrome, Safari, Opera */

}
img.foto {
    width: 250px;
    height: auto;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */

}

img.foto:hover {
/*    -webkit-transform: scaleX(1.5)*/
    transform: rotateY(-20deg); 
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
}

亚马逊翻书CSS动画：它是如何编码的？

Amazon book flipping CSS animation: how is it coded?

html

css

transform