image - 如何在css3中旋转图像

Question

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

.rotate {

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

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

transform: rotate(-9deg);}

但是，如果你想根据 z 轴旋转它（水平是 x，垂直 y，如果你明白我的意思，z 就会出现）

好的，我想在 x 或 y 轴上旋转它，给它一个 3d 效果。这在 css3 中可能吗？谢谢

Answer 1

使用 CSS 透视图后，您可以做自己想做的事。这是一个例子：http: //jsfiddle.net/joshnh/QHxzA/

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

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

Answer 2

CSS3 有3D 变换。这可能就是你想要的。它在 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 轴。