用js写的比较简单3D旋转效果

HTML代码如下：

js代码：

/**
 * Created by Administrator on 15-4-27.
 */
function $(id){
    return document.getElementById(id);
}
function fun1(){
    $("radio1").style.left="400px";
    $("radio1").style.top="25%";
    $("radio1").style.width="500px";
    $("radio1").style.height="350px";
    $("radio1").style.zIndex="3";
    $("radio1").firstElementChild.style.marginTop="450px";
    $("radio1").firstElementChild.style.width="500px";
    $("radio1").firstElementChild.style.height="20px";
    $("radio2").style.left="800px";
    $("radio2").style.top="36%";
    $("radio2").style.width="250px";
    $("radio2").style.height="200px";
    $("radio2").style.zIndex="2";
    $("radio2").firstElementChild.style.marginTop="300px";
    $("radio2").firstElementChild.style.width="250px";
    $("radio2").firstElementChild.style.height="10px";
    $("radio3").style.left="950px";
    $("radio3").style.top="40%";
    $("radio3").style.width="200px";
    $("radio3").style.height="150px";
    $("radio3").style.zIndex="1";
    $("radio3").firstElementChild.style.marginTop="200px";
    $("radio3").firstElementChild.style.width="200px";
    $("radio3").firstElementChild.style.height="5px";
    $("radio5").style.left="250px";
    $("radio5").style.top="36%";
    $("radio5").style.width="250px";
    $("radio5").style.height="200px";
    $("radio5").style.zIndex="2";
    $("radio5").firstElementChild.style.marginTop="300px";
    $("radio5").firstElementChild.style.width="250px";
    $("radio5").firstElementChild.style.height="10px";
    $("radio4").style.left="150px";
    $("radio4").style.top="40%";
    $("radio4").style.width="200px";
    $("radio4").style.height="150px";
    $("radio4").style.zIndex="1";
    $("radio4").firstElementChild.style.marginTop="200px";
    $("radio4").firstElementChild.style.width="200px";
    $("radio4").firstElementChild.style.height="5px";

}
function fun2(){
    $("radio2").style.left="400px";
    $("radio2").style.top="25%";
    $("radio2").style.width="500px";
    $("radio2").style.height="350px";
    $("radio2").style.zIndex="3";
    $("radio2").firstElementChild.style.marginTop="450px";
    $("radio2").firstElementChild.style.width="500px";
    $("radio2").firstElementChild.style.height="20px";
    $("radio3").style.left="800px";
    $("radio3").style.top="36%";
    $("radio3").style.width="250px";
    $("radio3").style.height="200px";
    $("radio3").style.zIndex="2";
    $("radio3").firstElementChild.style.marginTop="300px";
    $("radio3").firstElementChild.style.width="250px";
    $("radio3").firstElementChild.style.height="10px";
    $("radio4").style.left="950px";
    $("radio4").style.top="40%";
    $("radio4").style.width="200px";
    $("radio4").style.height="150px";
    $("radio4").style.zIndex="1";
    $("radio4").firstElementChild.style.marginTop="200px";
    $("radio4").firstElementChild.style.width="200px";
    $("radio4").firstElementChild.style.height="5px";
    $("radio1").style.left="250px";
    $("radio1").style.top="36%";
    $("radio1").style.width="250px";
    $("radio1").style.height="200px";
    $("radio1").style.zIndex="2";
    $("radio1").firstElementChild.style.marginTop="300px";
    $("radio1").firstElementChild.style.width="250px";
    $("radio1").firstElementChild.style.height="10px";
    $("radio5").style.left="150px";
    $("radio5").style.top="40%";
    $("radio5").style.width="200px";
    $("radio5").style.height="150px";
    $("radio5").style.zIndex="1";
    $("radio5").firstElementChild.style.marginTop="200px";
    $("radio5").firstElementChild.style.width="200px";
    $("radio5").firstElementChild.style.height="5px";
}
function fun3() {
    $("radio3").style.left="400px";
    $("radio3").style.top="25%";
    $("radio3").style.width="500px";
    $("radio3").style.height="350px";
    $("radio3").style.zIndex="3";
    $("radio3").firstElementChild.style.marginTop="450px";
    $("radio3").firstElementChild.style.width="500px";
    $("radio3").firstElementChild.style.height="20px";
    $("radio4").style.left="800px";
    $("radio4").style.top="36%";
    $("radio4").style.width="250px";
    $("radio4").style.height="200px";
    $("radio4").style.zIndex="2";
    $("radio4").firstElementChild.style.marginTop="300px";
    $("radio4").firstElementChild.style.width="250px";
    $("radio4").firstElementChild.style.height="10px";
    $("radio5").style.left="950px";
    $("radio5").style.top="40%";
    $("radio5").style.width="200px";
    $("radio5").style.height="150px";
    $("radio5").style.zIndex="1";
    $("radio5").firstElementChild.style.marginTop="200px";
    $("radio5").firstElementChild.style.width="200px";
    $("radio5").firstElementChild.style.height="5px";
    $("radio2").style.left="250px";
    $("radio2").style.top="36%";
    $("radio2").style.width="250px";
    $("radio2").style.height="200px";
    $("radio2").style.zIndex="2";
    $("radio2").firstElementChild.style.marginTop="300px";
    $("radio2").firstElementChild.style.width="250px";
    $("radio2").firstElementChild.style.height="10px";
    $("radio1").style.left="150px";
    $("radio1").style.top="40%";
    $("radio1").style.width="200px";
    $("radio1").style.height="150px";
    $("radio1").style.zIndex="1";
    $("radio1").firstElementChild.style.marginTop="200px";
    $("radio1").firstElementChild.style.width="200px";
    $("radio1").firstElementChild.style.height="5px";
}
function fun4() {
    $("radio4").style.left="400px";
    $("radio4").style.top="25%";
    $("radio4").style.width="500px";
    $("radio4").style.height="350px";
    $("radio4").style.zIndex="3";
    $("radio4").firstElementChild.style.marginTop="450px";
    $("radio4").firstElementChild.style.width="500px";
    $("radio4").firstElementChild.style.height="20px";
    $("radio5").style.left="800px";
    $("radio5").style.top="36%";
    $("radio5").style.width="250px";
    $("radio5").style.height="200px";
    $("radio5").style.zIndex="2";
    $("radio5").firstElementChild.style.marginTop="300px";
    $("radio5").firstElementChild.style.width="250px";
    $("radio5").firstElementChild.style.height="10px";
    $("radio1").style.left="950px";
    $("radio1").style.top="40%";
    $("radio1").style.width="200px";
    $("radio1").style.height="150px";
    $("radio1").style.zIndex="1";
    $("radio1").firstElementChild.style.marginTop="200px";
    $("radio1").firstElementChild.style.width="200px";
    $("radio1").firstElementChild.style.height="5px";
    $("radio3").style.left="250px";
    $("radio3").style.top="36%";
    $("radio3").style.width="250px";
    $("radio3").style.height="200px";
    $("radio3").style.zIndex="2";
    $("radio3").firstElementChild.style.marginTop="300px";
    $("radio3").firstElementChild.style.width="250px";
    $("radio3").firstElementChild.style.height="10px";
    $("radio2").style.left="150px";
    $("radio2").style.top="40%";
    $("radio2").style.width="200px";
    $("radio2").style.height="150px";
    $("radio2").style.zIndex="1";
    $("radio2").firstElementChild.style.marginTop="200px";
    $("radio2").firstElementChild.style.width="200px";
    $("radio2").firstElementChild.style.height="5px";
}
function fun5() {
    $("radio5").style.left="400px";
    $("radio5").style.top="25%";
    $("radio5").style.width="500px";
    $("radio5").style.height="350px";
    $("radio5").style.zIndex="3";
    $("radio5").firstElementChild.style.marginTop="450px";
    $("radio5").firstElementChild.style.width="500px";
    $("radio5").firstElementChild.style.height="20px";
    $("radio1").style.left="800px";
    $("radio1").style.top="36%";
    $("radio1").style.width="250px";
    $("radio1").style.height="200px";
    $("radio1").style.zIndex="2";
    $("radio1").firstElementChild.style.marginTop="300px";
    $("radio1").firstElementChild.style.width="250px";
    $("radio1").firstElementChild.style.height="10px";
    $("radio2").style.left="950px";
    $("radio2").style.top="40%";
    $("radio2").style.width="200px";
    $("radio2").style.height="150px";
    $("radio2").style.zIndex="1";
    $("radio2").firstElementChild.style.marginTop="200px";
    $("radio2").firstElementChild.style.width="200px";
    $("radio2").firstElementChild.style.height="5px";
    $("radio4").style.left="250px";
    $("radio4").style.top="36%";
    $("radio4").style.width="250px";
    $("radio4").style.height="200px";
    $("radio4").style.zIndex="2";
    $("radio4").firstElementChild.style.marginTop="300px";
    $("radio4").firstElementChild.style.width="250px";
    $("radio4").firstElementChild.style.height="10px";
    $("radio3").style.left="150px";
    $("radio3").style.top="40%";
    $("radio3").style.width="200px";
    $("radio3").style.height="150px";
    $("radio3").style.zIndex="1";
    $("radio3").firstElementChild.style.marginTop="200px";
    $("radio3").firstElementChild.style.width="200px";
    $("radio3").firstElementChild.style.height="5px";
}

大家可以试试我这个旋转效果，全是用定位来做的，问题还有很多，js功底不行，如果旋转的个数增加的话，相应的代码就会增加不少。

这里有6个矩形旋转，点最后一层的时候有问题，所以在每个函数开头做了限制。

希望看到的朋友帮我解决下这个问题，面向对象的功底还很差

 

转载于:https://www.cnblogs.com/huangyy/p/4542473.html