3D就是平面的意思（三维），可以通过元素改变形状、尺寸和位置的一种效果，浏览器支持：nternet Explorer 10 和 Firefox 支持3D转换，注意 Chrome 和 Safari 需要前缀 -webkit-，Opera 不支持 3D 转换（它只支持 2D 转换）下面为大家介绍一下具体实现方式。
1、首先了解2D转换使用的各方法含义：
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转； rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
2、介绍rotateX() 方法与rotateY() 方法连用，具体步骤如下
1）html页面内容，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content=""> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>欢迎收藏www.yoodb.com</title> </head> <body> <div onclick="rotateDIV()" id="rotate">3D 旋转</div> </body> </html>
2）为了方便演示效果增加CSS样式与3D效果无关，代码如下：
<style>
#rotate{
width:80px;
height:80px;
font-size:16px;
font-weight: bold;
border: 2px solid #000000;
background: red;
margin: 0 auto;
line-height: 80px;
text-align: center;
}
</style>3）实现2D效果，具体JS代码如下：
<script>
<!--
var y,n=0,rot;
function rotateDIV(){
y = document.getElementById("rotate");
//clearInterval(rot);
rot = setInterval("startRotate()",10);
}
function startRotate(){
n = n+1;
y.style.transform="rotateX(" + n + "deg)";
y.style.webkitTransform="rotateX(" + n + "deg)";
y.style.OTransform="rotateX(" + n + "deg)";
y.style.MozTransform="rotateX(" + n + "deg)";
if(n > 180){
y.style.transform="rotateY(" + n + "deg)";
y.style.webkitTransform="rotateY(" + n + "deg)";
y.style.OTransform="rotateY(" + n + "deg)";
y.style.MozTransform="rotateY(" + n + "deg)";
}
if (n==180 || n>=360) {
//clearInterval(rot);
if (n >= 360){
n = 0;
}
}
}
//-->
</script>注意：上述代码1-3步骤直接粘贴到文件中用浏览器打开点击之后就会出现效果，//clearInterval(rot);（执行 clearInterval 时 setInterval() 方法停止调用函数）注释的代码，此时点击之后先元素围绕其 X 轴以给定的度数进行旋转，之后元素围绕其 Y 轴以给定的度数进行旋转，打开注释每次点击只会改变180角度。
