CSS3除了為開發者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態，能夠實現真正的三維特效。
三維變形和二維變形壹樣，均使用的是transform屬性。想要觸發三維變形有兩種方式：壹種方式是通過語法告知瀏覽器“請采用三維方式進行變形處理”，另壹種方式是直接使用CSS3三維變形的語法。
觸發方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動端，絕大多數的瀏覽器均為WebKit內核，因此，在此句代碼之前需要書寫-webkit-的前綴內核。
Tips：不要為body元素設置-webkit-transform-style:preserve3d,否則會對position:fixed定位的元素造成布局影響。在開發當中，如果當前元素屬於body的子級元素，又希望應用三維變形，則在body和當前元素之間多嵌套壹層結構，並為這層元素應用三維變形即可。
觸發方法2：直接使用CSS3變形語法
<!DOCTYPEhtml>
<head>
<metacharset=\"UTF-8\">
<title>言成科技/title>
<style>
.box1{
width:150px;
height:150px;
border:2pxsolidblue;
}
.box1div{
height:150px;
background:rgba(0,0,0,0.5);
-webkit-transform:translate3d(30px,60px,20px)rotateX(30deg);
transform:translate3d(30px,60px,20px)rotateX(30deg);
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>