1苛萎、3D transform中有下面這三個方法：
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
意思是分別繞著X/Y/Z軸進行旋轉缎浇。
學過一部分數(shù)學知識的人應該都能理解這里XYZ軸的意思。
可參見下圖：
2熔号、perspective屬性
perspective屬性的存在與否決定了所看到的是2D的還是3D的稽鞭。 沒有透視，就不能稱為3D引镊。
CSS3 3D transform中的透視的透視點與上面示例圖是不同的：CSS3 3D transform的透視點是在瀏覽器的前方朦蕴，近似就是眼睛所在方位。
例如弟头，一個1360像素寬的顯示器中有張圖片吩抓，應用了3D transform，同時亮瓷，該元素或該元素父輩元素設置的perspective大小為2000像素琴拧。則這張圖片呈現(xiàn)的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%涯肩；
第一個參數(shù)表示了從左向右的偏向程度，50%表示視線落在中間巢钓，不偏左也不偏右宽菜，30%則表示從左向右數(shù)30%的地方看。
第二個參數(shù)表示了從上到下的偏向程度竿报，類同第一個參數(shù)铅乡。
5、transform-style: preserve-3d
transform-style有兩個可能的值：flat（默認值烈菌，平面的）和preserved-3d
（3D透視）這個屬性是定義你是用什么方式看到元素阵幸，一般想要呈現(xiàn)3D效果就要把這個設置為preserved-3d。
一般而言芽世，該聲明應用在3D變換的元素們的父元素上挚赊，也就是舞臺元素。
6济瓢、backface-visibility
在CSS3 3D中荠割，默認情況下我們可以看到背后的元素。但是為了貼合實際，我們常常設置為backface-visibility：hidden蔑鹦，使背后元素不可見夺克。
7、一個小例子（借鑒于張鑫旭的博客）
效果：
點擊圖片區(qū)域可以實現(xiàn)照片按順時針旋轉嚎朽。
可以將例子復制到自己的網頁中試一下铺纽！
代碼：
<!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做了一個很好看的旋轉菜單狡门，決定下次要試一下！
