2D就是平面的意思（二维），可以通过元素进行移动、缩放、转动、拉长或拉伸，改变形状、尺寸和位置的一种效果，浏览器支持：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性，注意Chrome 和 Safari 需要前缀 -webkit-，下面为大家介绍一下具体实现方式。
1、首先了解2D转换使用的各方法含义：
translate()方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数； rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转； scale()方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数； skew()方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数； 等等...
2、介绍rotate()方法，元素顺时针旋转给定的角度
1）html页面内容，代码如下：
<!DOCTYPE html> <html> <head> <title>欢迎收藏www.yoodb.com</title> </head> <body> <div onclick="rotateDIV()" id="rotate">2D 旋转</div> </body> </html>
2）为了方便演示效果增加CSS样式与2D无关，代码如下：
<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 x,n=0,rot;
function rotateDIV(){
x = document.getElementById("rotate");
//clearInterval(rot);
rot = setInterval("startRotate()",10);
}
function startRotate(){
n = n+1;
x.style.transform="rotate(" + n + "deg)";
x.style.webkitTransform="rotate(" + n + "deg)";
x.style.OTransform="rotate(" + n + "deg)";
x.style.MozTransform="rotate(" + n + "deg)";
if (n==180 || n==360){
clearInterval(rot);
if (n==360){
n=0;
}
}
}
//-->
</script>注意：上述代码1-3步骤直接粘贴到文件中用浏览器打开点击之后就会出现效果，//clearInterval(rot);（执行clearInterval时setInterval() 方法停止调用函数）注释的代码，如果用户连续点击就会见到特别绚丽的效果，打开之后每次点击只会改变180角度。
