如何旋轉在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軸。