2D旋转和3D旋转

2D旋转

先给个容器

<p onClick="rotate2D()" id="rotate2D" class="animated_div">2D 旋转</p>

再给个样式（乱写的，可随意修改。）

.animated_div{width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; vertical-align:middle;}

#rotate2D{border:1px solid #000000; background:red; margin:10px; opacity:0.7;}

定义好需要的变量

//2dContainer为获取到的旋转元素
//count2D用来在Timer里面计算的渐变的角度
//roll2DTimer旋转的定时器
var 2dContainer,count2D=0,roll2DTimer;

拿到元素让它转

function rotate2D()
{
2dContainer=document.getElementById("rotate2D");
clearInterval(roll2DTimer);
roll2DTimer=setInterval("start2DRotate()",10);
}

具体怎么转还得写在计时器里

function start2DRotate()
{
count2D=count2D+1;
2dContainer.style.transform="rotate(" + count2D + "deg)";
2dContainer.style.webkitTransform="rotate(" + count2D + "deg)";
2dContainer.style.OTransform="rotate(" + count2D + "deg)";
2dContainer.style.MozTransform="rotate(" + count2D + "deg)";
if (count2D==180 || count2D==360)
    {
    clearInterval(roll2DTimer);
    if (count2D==360){count2D=0;}
    }
}

style里所有浏览器的transform都有属性，都要进行对应的设置，设置的方式是把rotate()方法写成字符串传给transform属性，这个方式还挺特别的。

3D旋转也一样，先来一个容器

<p onClick="rotate3D()" id="rotate3D" class="animated_div">3D 旋转</p>

样式和2D的一样

.animated_div{width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; vertical-align:middle;}

#rotate3D{border:1px solid #000000; background:red; margin:10px; opacity:0.7;}

定义好需要的变量

//3dContainer为获取到的旋转元素
//count3D用来在Timer里面计算的渐变的角度
//roll3DTimer旋转的定时器
var 3dContainer,count3D=0,roll3DTimer;

拿到元素让它转

function rotate3D()
{
3dContainer=document.getElementById("rotate3D");
clearInterval(rot3DTimer);
rot3DTimer=setInterval("start3DRotate()",10);
}

在计时器里写具体转法

function start3DRotate()
{
count3D=count3D+1;
3dContainer.style.transform="rotateY(" + count3D + "deg)";
3dContainer.style.webkitTransform="rotateY(" + count3D + "deg)";
3dContainer.style.OTransform="rotateY(" + count3D + "deg)";
3dContainer.style.MozTransform="rotateY(" + count3D + "deg)";
if (count3D==180 || count3D>=360)
    {
    clearInterval(rot3DTimer);
    if (count3D>=360){count3D=0;}
    }
}

终于可以转起来了呢，然而这并没有什么卵用，毫无逼格！