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

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style>

            #radio{ position: relative; margin:0 auto; width: 1280px; height: 800px;border: 1px solid red;}

            .radio_style{border: 5px solid rgb(14,73,102); transition:all 1s; width: 200px; height: 200px;}

            .radio_style>div{opacity: 0.3; border-radius: 50%;background: black;margin:0 auto;margin-top: 150px;transition:all 1s;}

            #radio1{

                transition:all 1s;

                background: #CCCCCC;

                position: absolute;

                left:150px;

                top: 40%;

                width: 200px;

                height: 150px;

                z-index: 1}

            #radio2{

                transition:all 1s;

                background: #CCCCCC;

                position: absolute;

                left:250px;

                top: 36%;

                width: 250px;

                height: 200px;

                z-index: 2

            }

            #radio3{

                transition:all 1s;

                background: #CCCCCC;

                position: absolute;

                left:400px;

                top: 25%;

                width: 500px;

                height: 350px;

                z-index: 3

            }

            #radio4{

                transition:all 1s;

                background: #CCCCCC;

                position: absolute;

                left:800px;

                top: 36%;

                width: 250px;

                height: 200px;

                z-index: 2

            }

            #radio5{

                transition:all 1s;

                background: #CCCCCC;

                position: absolute;

                left:950px;

                top:40%;

                width: 200px;

                height: 150px;

                z-index: 1

            }

            #radio1>div{width: 200px ;margin-top: 200px;height:5px }

            #radio2>div{width: 250px;margin-top: 300px;height: 10px; }

            #radio3>div{width: 500px;margin-top: 450px;height: 20px }

            #radio4>div{width: 250px;margin-top: 300px;height: 10px }

            #radio5>div{width: 200px;margin-top: 200px; height: 5px}

        </style>

    </head>

    <body>

        <div id="radio">

            <div class="radio_style" id="radio1" onclick="fun1();"><div></div></div>

            <div class="radio_style" id="radio2" onclick="fun2()"><div></div></div>

            <div class="radio_style" id="radio3" onclick="fun3()"><div></div></div>

            <div class="radio_style" id="radio4" onclick="fun4()"><div></div></div>

            <div class="radio_style" id="radio5" onclick="fun5()"><div></div></div>

        </div>

        <script type="text/javascript" src="js.js"></script>

    </body>

</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个矩形旋转，点最后一层的时候有问题，所以在每个函数开头做了限制。

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

用js写的比较简单3D旋转效果的更多相关文章

js写的一个简单的手风琴菜单
1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...
原生js写的一个简单slider
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用JS写的一个简单的时钟
没什么技术含量,单纯的想传上去.手痒了 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
Css3动画（一）如何画3D旋转效果或者卫星围绕旋转效果
如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...
Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码项目GitHub地址:https: ...
好玩的WPF第四弹：用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）
序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...

随机推荐

javascript的数值转换
在javascript中数值转换,最要的一点是函数第一个字母必须要大写.js中的函数有string字符型.number数值型.null空型.boolean布尔型.undefined未定义. 具体的转换 ...
LeetCode 445 Add Two Numbers II
445-Add Two Numbers II You are given two linked lists representing two non-negative numbers. The mos ...
switch语句下的变量声明和定义
switch语句下的变量声明和定义的问题: switch...case...语句中存在声明和定义会出现一些问题.这个由switch语法特性决定的, switch中每个case都是平等的层次,区别于一般 ...
【python】迭代器&生成器
源Link:http://www.cnblogs.com/huxi/archive/2011/07/01/2095931.html 迭代器迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素 ...
Linux 下的dd命令使用详解(摘录)
一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...
无cookie下载Oracle otn上的sun jdk等软件
从Oracle下载sun jdk提示:In order to download products from Oracle Technology Network you must agree to th ...
nth_element 测试程序
/******************************************************************** created: 2014/04/29 11:35 file ...
greendao对SQLite数据库的增删改查操作
利用greendao操作数据库时,都是以对象或者对象的list来进行增删改查的操作,操作的结果都是用一个list来接收的!!! 1.增加一条记录 Stu stu01=new Stu();stu01.s ...
改变jboss部署目录（虚拟目录）
笔记: 在开发过程中,有时候我们希望将程序放在我们的源代码目录中,比如d:\code下,而不是放在jboss的deploy下,怎么办? 我们知道,jboss中集成了tomcat,因此跟tomcat一样 ...
Android的post()方法究竟运行在哪个线程中
Android中我们常用的post()方法大致有两种情况: 1.如果post方法是handler的,则Runnable执行在handler依附线程中,可能是主线程,也可能是其他线程 2.如果post方 ...

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

用js写的比较简单3D旋转效果的更多相关文章

随机推荐

热门专题