如何旋转在CSS3

Question

的图像，我想使图像的旋转，所以我红认为我们能做到这一点的宽度

.rotate { 

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

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

transform: rotate(-9deg);} 

，但是，这是如果你想根据旋转它z轴（水平是x，vert。y和z来找你，如果你明白我的意思）

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

Answer 1

您可以在使用CSS透视图后执行操作。这里有一个例子：http://jsfiddle.net/joshnh/QHxzA/

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

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

Answer 2

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轴是指深度轴（进入/ outfrom的画面）。围绕Z轴旋转只会导致正常的2D旋转（就像如果您通过卡插入一个针）。你在寻找X/Y轴。