html - 如何使图像在悬停时向前倾斜

Question

我整个上午都在玩转场，但遇到了障碍。当鼠标悬停时，我需要让图像向前“倾斜”。基本上我们有啤酒龙头，当它们悬停在上方时，它们希望它们倾斜，就好像它们被拉下来一样。我玩过一堆代码，但现在没有什么可以远程发布的。如果有人可以就如何在 css3 中实现这一点提供一些帮助，我们将不胜感激。

Answer 1

下面是一个基本版本(适用于 safari 和 chrome)。您可以使用透视值来改变效果。

我不确定你在哪里遇到了麻烦，但这里的关键点是:

• 用于容纳旋转元素的容器，允许您使用透视
• 改变动画整体外观的视角
• transform-origin 设置图片的旋转点(demo中使用bottom)
• rotateX 绕 x 轴旋转 - 使图像朝向/远离观察者倾斜

html:

<div class="container">
    <img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>

CSS:

.container {
    -webkit-perspective: 1000px;
            perspective: 1000px;
    margin: 2em;
    transform-style: preserve-3d;
}

img {
    transition: all .5s ease;
    -webkit-transform: rotateX(0deg);
    -webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}

img:hover {
    -webkit-transform: rotateX(-40deg);
}

Demo jsFiddle