jsで書いた比較的簡単な3 D回転効果です.

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