Internet Explorer 10 和 Firefox 支持 3D 转换.
Chrome 和 Safari 必须添加前缀 -webkit-.
Opera 还不支持 3D 转换(支持 2D 转换 ).
三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数：
•3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
•3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
•3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
•3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
还有以下几个转换属性：
•transform-style： 规定被嵌套元素如何在 3D 空间中显示。
•perspective： 规定 3D 元素的透视效果。
•perspective-origin： 规定 3D 元素的底部位置。
•backface-visibility： 定义元素在不面对屏幕时是否可见。
目前各大主流浏览器对transform 3d属性的兼容性还不是特别好，感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法：
rotateX()方法，围绕其在一个给定度数X轴旋转的元素；
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素；
rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。
JavaScript Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform 3d </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 440px;
height: 120px;
border: 1px solid blue;
margin: 20px auto;
padding: 20px 20px;
}
#div1 ,#div2, #div3, #div4{
