用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. 【腾讯Bugly干货分享】你为什么需要 Kotlin

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/xAFKGarHhfQ3nKUwPDlWwQ 一.往事 ...

  2. 用js给html控件赋值

      用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...

  3. 职业定位(Web前端、后台、PC端)

    Web前端 Web前端开发工程师:http://baike.sogou.com/v18499271.htm WEB前端开发面试题集锦:http://wenku.baidu.com/view/47bbc ...

  4. Grunt实现自动化单元测试

    http://www.tuicool.com/articles/rAnaYvn   直奔主题: 一.安装grunt-contrib-qunit npm install grunt-contrib-qu ...

  5. PHP 单态设计模式复习

    单态设计模式,也可以叫做单例设计模式, 就是一个类只能让它生成一个对象,避免重复的NEW,影响运行效率(每NEW一个对象都会在内存中开辟一块空间) 示例代码 <?php /* * 单态设计模式 ...

  6. MariaDB与MySQL在一台服务器同时运行

    [root@HE3 ~]#groupadd mariadb -g 513 [root@HE3 ~]#useradd-u 513 -gmariadb -s /sbin/nologin -d /home/ ...

  7. jackson - 生成jason工具-简单示例

    主页: http://jackson.codehaus.org/ https://github.com/FasterXML/jackson 当前jackson分为三部分,需要分别下载: jackson ...

  8. Mangos笔记

    $lt.$lte.$gt.$gte和$ne $in.$nin.$or $mod.$not $exists 条件句式内层文档的键,修改器是外层文档的键,一个键可以有多个 条件,但是一个键不能对应多个更新 ...

  9. SQLSERVER如何导入数据保持ID不变（ID为自增主键）

    使用SQL SERVER最操蛋的就是导入数据,以前用企业管理器直接导数据,导一次骂N次娘,在骂了微软无数次娘之后总结了一个方法揍合着还算受用. 其核心要点就是要将数据结构导入到目标数据库服务器上,再来 ...

  10. 转载：MyEclipse安装插件的几种方法

    地址:http://www.cnblogs.com/pharen/archive/2012/02/08/2343342.html 本文讲解MyEclipse(MyEclipse10)的三种方法,以SV ...