Question

我整个上午一直在玩过渡，我正在路障。当我盘旋时，我需要向前倾斜一个图像。基本上我们有啤酒水龙头，当它们悬停在它们上面时，它们希望它们倾斜，好像它们被拉下来一样。我玩了很多代码，但是现在没有任何东西可以远离这里发布。如果有人可以在css3中提供一些如何实现这一点的帮助，我们将不胜感激。

Answer 1

以下是基本版本（适用于safari和chrome）。您可以使用透视值来更改效果。

我不确定你遇到麻烦的地方，但关键点是：

用于容纳旋转元素的容器，允许您使用透视
透视图以改变动画的整体外观
transform-origin设置图像的旋转点（使用演示中的底部）
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

Answer 2

CSS支持X和Y 3D旋转，但是你不能纯粹在CSS中在Z轴上（向前和向后）旋转，也许Javascript或jQuery就可以这样做。

有关CSS旋转的更多信息，请尝试在此处阅读：http://www.w3schools.com/css/css3_3dtransforms.asp

Answer 3

我会玩CAMANJS之类的东西，或者只是创建第二张背景图片来倾斜现有图像并在悬停事件中使用它。

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

3 个答案: