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

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

时间： 2024-12-17 14:35:51

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

js写的简单购物车

最近在学习js的知识,对于我这种菜鸟而言,JS让我太痛苦了.曾经也不知道听谁说js很简单的,所以就学了,学了才知道...都是坑.... 现在分享一个我忍着巨大的痛苦写的一个简单购物车,并不是很完善.虽然不是我一个完成的,但是我是努力弄懂弄回才准备分享出去.有问题的部分请谅解,希望可以帮到有需要的朋友. 以下是购物车的简单代码: (1)html <body> <div class="shopCar"> <div class="caozuo"

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

原生js写个简单的数字键盘（by vczero）

一.起因最近支付的同事说,数字键盘有些问题:在移动设备上有时候比较难出现点(.) 和数字在一起的格局:因此,考虑到这种情况,就建议手写个模拟键盘了.花了一晚上的时间,写了个简单的键盘,基本能用.考虑到有的开发者没有使用juqery,就使用原生的js了. Github地址:https://github.com/vczero/keyboard 二.截图如下三.体验地址(需要点击input才能弹出数字键盘的哦) URL: http://vczero.github.io/num_key/index.

Css3动画（一）如何画3D旋转效果或者卫星围绕旋转效果

如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说,进入正题. 我们都知道,浏览器是一个平面的视觉效果,如何在一个平面上看出立体的3D效果呢,其实就是一个视觉差的问题.那我们就从一个平面视觉效果一步一步画出立体的3D效果来.我还是先把效果放出来吧,点击预览(终版) 一.先画出平面视觉上卫星的旋转轨迹卫星的轨迹一般都是圆的或者椭圆的,我们就先以一个

JS基础（超级简单）

1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) string 3) boolean 4) null 5) undefined 1.1.2 复杂类型 object:date,array,function 1.2 变量 var 变量名=值变量的作用域:1.全局:以页面为单位.2局部:以函数为单位.

JS写小游戏（一）：游戏框架

前言前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述一般,小游戏都要关注两个问题:刷新和交互.因为游戏一般是动态的,所以需要不断刷新.JavaScript是单线程,如果用C语言写过贪吃蛇之类的小游戏,应该知道,单线程一般是挂起一个时间来达到动态效果.比如C语言的Sleep(),JS的setInterval()等.但是js还有一种更高性能的方法req

更快学习 JS 的 6 个简单思维技巧

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候. 很难找到学习的时间(有时候是动力). 一旦当你理解了一些东西的时候,却很容易再一次忘记. 可以使用的工具甚多且经常变化,所以不知道从哪里开始入手. 幸运的是,这些挑战最终都可以被战胜.在这篇文章里,我将介绍 6 个思维技巧来帮你更快的学习 JavaScript ,让你成为一个更快乐更多产的程序员. 1.不要让将来的决定阻止你进步对于很多学习 JavaSc

用原生JS写移动动画案例及实际应用

js很强大相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的左边或右边会有个分享的框,鼠标放上去就还移出一个列表,里面是要分享的地址.鼠标移开,就会移进去. 要实现这个效果要怎么做呢? 可以想一想,鼠标经过和鼠标离开很好理解用onmousemove事件和onmouseout事件就能完成. 那移动动画呢?我们可以一步一步思考, 首先,一开始是这样的完成移动

基于CSS3的3D旋转效果

自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文中对3D转换进行了形象.生动.详细的阐述.在这里,只和大家讨论怎么利用3D转换来实现立体及其旋转效果,例如: 好吧,废话不多说,上代码! 1.页面代码 1 <div class="translate3D_test"> 2 <ul class="cube"