用css3属性很容易做一个立方体，但是要做一个球体，会相对复杂些

原理是：球可以看做是由无数个圆圈构成，然后就可以用圆圈来做球，

下面的例子是我做的一个小球，由72个圆圈组成。如果把每个圆圈的背景颜色设置同一颜色，效果更佳

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            perspective: 1000px;

            background-color: grey;

        }

        .bigBox{

            width: 80px;

            height: 80px;

            border-radius: 50%;

            position: relative;

            margin: 100px auto;

            transform-style: preserve-3d;

        }

        ul{

            padding: 0;

            margin: 0;

            width: 80px;

            height: 80px;

            border-radius: 50%;

            box-shadow: 0 0 1px 1px yellowgreen;

            position: absolute;

            list-style: none;

            transform-style: preserve-3d;

        }

        .qiuXian{

            padding: 0;

            margin: 0;

            width: 80px;

            height: 80px;

            border-radius: 50%;

            box-shadow: 0 0 1px 1px yellowgreen;

            position: absolute;

            list-style: none;

        }

        @keyframes zizhuan {

            from{rotateX(0deg) rotateY(0deg) }

            to{

                transform: rotateX(360deg) rotateY(360deg);

            }

        }

        .animation{

            animation: zizhuan 10s linear infinite;

        }

    </style>

    <script>

     window.onload= function () {

            function zaoQiu(id,className) {

                var ele = document.getElementById(id);

                for(var i = 0 ; i < 72 ; i++){

   //创建div元素

                    var div = document.createElement("div");

//将创建出来的div的className 统一设置为className,方便通过CSS 设置样式

                    div.className = className;

 //在目标元素中添加该div

                    ele.appendChild(div);

                }

//获取新创建出来的所有div

                var divs = document.getElementsByClassName(className);

//首先遍历前一半的div，并设置他们的属性

                for(var i = 0 ; i < 36 ; i++){

                    divs[i].style.transform = "rotateY("+10*i+"deg)";

                }

 //遍历后一半的div，并设置它们的属性

                for(var i = 36 ; i < divs.length ; i++){

                    divs[i].style.transform =  "rotateX("+10*i+"deg)";

                }

            }

            zaoQiu("bigBox","qiuXian");

         }

    </script>

</head>

<body>

<div class="bigBox animation" id="bigBox">

</div>

</body>

</html>

用js，css3 做的一个球的更多相关文章

  1. 用js+css3做一个小球投篮的动画（easing）

    <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js">& ...

  2. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  3. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  4. 用js给闺女做了一个加减乘除的html

    下班回家用二十分钟给闺女做了一个加减乘除的页面,顺便记录下代码,时间仓促,后期再来修改吧 目录结构 -yq --menu.html --yq.html --yq50.html --yq70.html ...

  5. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  6. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  7. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  8. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  9. CSS3 实现的一个简单的"动态主菜单" 示例[转]

    其实这个示例蛮无聊的 很简单 也没什么实际的用处. 主要是展示了 CSS3 如何实现动画效果. 写这个主要是想看一看 完成这样的效果 我到底要写多少代码. 同时和我熟悉的java做个比较. 比较结果不 ...

随机推荐

  1. Python3基础 add() 向集合中加入新的元素

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. C # 产生鼠标点击事件

    新建一个WinFrom,找到MouseDown,回车,生成代码如下点击的效果如图 参考文章:http://blog.csdn.net/u012842807/article/details/454143 ...

  3. Robocopy 轉帖

    实例一:文件,想怎么复制就怎么复制 [实现效果] 随时将源文件夹中的纯文本(TXT).Word文档(DOC)还有BMP.TIF图像文件复制到目标文件夹中 ,这是在"资源管理器"中直 ...

  4. ZipFile和ZipInputSteam解压zip文件

    最近有个需求,要接受上穿的zip文件,解压后读取里面的文件(应该还有目录),提前储备一下需要的知识. 贴在博客上,有需要的可以参考. ZipInputStream解压文件: @Test public ...

  5. 浅谈ServletContext

    ServletContext是什么? WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.ServletConfig对象中维护了Serv ...

  6. 在delphi中，DLL加载时做初始化的Demo

    library DLLEntry;//dll源码 uses SysUtils, Classes, Dialogs, Windows; {$R *.res} procedure DLLEntryPoin ...

  7. C#与Java互通AES算法加密解密

    /// <summary>AES加密</summary> /// <param name="text">明文</param> /// ...

  8. java UUID的创建

    java UUID的创建: 参考:http://blog.csdn.net/yaerfeng/article/details/7070369 可以研究一下最后的一段代码: http://spiritf ...

  9. 将SWF文件用作资源打包

    使用Flash开发网页游戏少不了与各种美术资源打交道.对于静态资源的那就是各种图片,对于会动的资源可以考虑直接做成swf.制作成swf的美术资源又可以分为两种:一种是直接将关键帧罗列在主时间轴上,那么 ...

  10. TCP&UDP

    TCP(传输控制协议) 建立连接,形成传输数据的通道 在连接中进行大数据传输(数据大小不受限制) 通过三次握手完成连接,是可靠协议,安全送达(三次握手向服务器发送请求,响应请求回复,发送数据) 必须建 ...