如何在css3中旋转图像

Question

我想旋转图像，所以我红了，我们可以做那个宽度

.rotate {

-webkit-transform: rotate(-9deg);

-moz-transform: rotate(-9deg);

transform: rotate(-9deg);}

但是，如果你想根据z轴旋转它（水平是x，垂直y，如果你看到我的意思，z会来找你）

好的，我想在x或y轴上旋转它以产生3d效果。在css3中这可能吗？ 感谢

Answer 1

CSS3有3D transforms。这可能就是你想要的。它支持Firefox，Chrome和IE10，但不支持旧的IE或Opera。

更深入一些：

http://caniuse.com/transforms3d

http://www.html5rocks.com/en/tutorials/3d/css/

http://www.webkit.org/blog/386/3d-transforms/

Z轴也指深度轴（进出屏幕）。围绕Z轴旋转只会导致正常的2D旋转（就像你将一个针插入卡片一样）。你正在寻找X / Y轴。

Answer 2

使用CSS透视图后，您可以执行您的操作。以下是一个示例：http://jsfiddle.net/joshnh/QHxzA/

代码的重要部分是（不要忘记使用浏览器前缀）：

img {
    transform: perspective(500px) rotateX(15deg);
}