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

我发现我需要解决这个问题。我之前尝试过透视和透视原点选项，但没有将它们放在正确的位置。这些选项必须放在父元素中（这里是“achtergrond”-div）。

请参阅带引号的w3schools

定义元素的perspective-origin属性时，它是定位的CHILD元素，而不是元素本身。

因此新的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动画：它是如何编码的？

2 个答案: