我想对图像进行旋转，所以我红色表示我们可以做到这个宽度
.rotate {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);}
但是，如果你想根据z轴旋转它（水平是x，垂直y，如果你明白我的意思，z就会出现）
好的，我想在 x 或 y 轴上旋转它以赋予它 3d 效果。这在 css3 中可能吗？ 谢谢
【问题讨论】：
.rotate { transform:skewY(130deg); }
标签： image css rotation image-rotation
使用 CSS 透视图后，您可以做自己想做的事。这是一个例子：http://jsfiddle.net/joshnh/QHxzA/
重要的代码是（不要忘记使用浏览器前缀）：
img {
transform: perspective(500px) rotateX(15deg);
}
【讨论】：
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 轴。
【讨论】：