1、3D transform中有下面这三个方法：
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
意思是分别绕着X/Y/Z轴进行旋转。
学过一部分数学知识的人应该都能理解这里XYZ轴的意思。
可参见下图：
笛卡尔坐标系
2、perspective属性
perspective属性的存在与否决定了所看到的是2D的还是3D的。 没有透视，就不能称为3D。
3D透视
CSS3 3D transform中的透视的透视点与上面示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方，近似就是眼睛所在方位。
例如，一个1360像素宽的显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张图片呈现的3D效果就跟你本人在1.47个显示器宽度的地方(1360*1.47≈2000)看到的真实效果一致。
3、translateZ()
translateZ()就相当于让图片向它正在面对的方向走过来（正值）或者远去（负值）。
所以，对于没有rotateX()和rotateY()的元素，translateZ()就相当于让它向屏幕前的你走过来或离你远去。
用这种情况举例。
（1）如果，设置父元素的perspective为1000px，当你设置子元素的translateZ()的值大于或等于1000px时，元素将会从屏幕上消失！这不难理解，相当于元素走到了你眼睛的后面，而显然，眼睛看不到自己后面的东西。
（2）translateZ()的值越小，元素越小，符合我们认知中远大近小的场景。
当父元素没有设置overflow：hidden的时候，translateZ()的值十分接近perspective的值也就是1000px时，元素将充斥整个屏幕，相当于把元素拿到了你眼前。
4、perspective-origin
perspective-origin设置了你看元素的角度。默认是50% 50%；
第一个参数表示了从左向右的偏向程度，50%表示视线落在中间，不偏左也不偏右，30%则表示从左向右数30%的地方看。
第二个参数表示了从上到下的偏向程度，类同第一个参数。
perspective-origin=50% 30%
perspective-origin=50% 50%
perspective-origin=20% 50%
5、transform-style: preserve-3d
transform-style有两个可能的值：flat（默认值，平面的）和preserved-3d
（3D透视）这个属性是定义你是用什么方式看到元素，一般想要呈现3D效果就要把这个设置为preserved-3d。
一般而言，该声明应用在3D变换的元素们的父元素上，也就是舞台元素。
6、backface-visibility
在CSS3 3D中，默认情况下我们可以看到背后的元素。但是为了贴合实际，我们常常设置为backface-visibility：hidden，使背后元素不可见。
7、一个小例子（借鉴于张鑫旭的博客）
效果：
效果图
点击图片区域可以实现照片按顺时针旋转。
可以将例子复制到自己的网页中试一下！
代码：
<!DOCTYPE html>
<html>
<head>
<title>transform 3D test</title>
<meta charset="utf-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
position: absolute;
}
.stage{
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
background-color: #f0f0f0;
box-shadow: inset 0 0 3px rgba(0,0,0,.35);
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-transition: top .5s;
position: relative;
top: 50%;
perspective-origin: 50% 30%;
transform: translate(0,-50%);
}
.pic{
width: 128px;
height: 80px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
.pic:nth-child(1) { transform: rotateY( 0deg ) translateZ(200px);}
.pic:nth-child(2) { transform: rotateY( 40deg ) translateZ(200px);}
.pic:nth-child(3) { transform: rotateY( 80deg ) translateZ(200px);}
.pic:nth-child(4) { transform: rotateY( 120deg ) translateZ(200px);}
.pic:nth-child(5) { transform: rotateY( 160deg ) translateZ(200px);}
.pic:nth-child(6) { transform: rotateY( 200deg ) translateZ(200px);}
.pic:nth-child(7) { transform: rotateY( 240deg ) translateZ(200px);}
.pic:nth-child(8) { transform: rotateY( 280deg ) translateZ(200px);}
.pic:nth-child(9) { transform: rotateY( 320deg ) translateZ(200px);}
.container{
width: 128px;
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 50%;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.white{
background-color: white;
}
.black{
background-color: black;
}
.blue{
background-color: blue;
}
</style>
<div class="main">
<div class="stage">
<div class="container">
<div class="pic orange">1</div>
<div class="pic red">2</div>
<div class="pic green">3</div>
<div class="pic white">4</div>
<div class="pic black">5</div>
<div class="pic blue">6</div>
<div class="pic orange">7</div>
<div class="pic white">8</div>
<div class="pic green">9</div>
</div>
</div>
</div>
<script type="text/javascript">
var x=1;
$(".container").on('click',function(){
var y=40*x;
var container=$(".container");
container.css("transform","rotateY("+(-1*y)+"deg)");
x++;
});
</script>
</body>
</html>
第一次接触CSS 3D，觉得蛮好玩的，记得之前看到过一个应用rotate做了一个很好看的旋转菜单，决定下次要试一下！
网友评论