用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. mysql配置主从数据库

    1.目的 1.1 实现数据备份 1.2 项目访问时可以实现读写分离,提高访问和操作数据的速度<读写分离好处> 2.背景 这次的主从配置主要实现主库数据的改变可以实现同步到从库中: 此次试验 ...

  2. android TextView实现滚动显示效果

    在android中,如果设置了TextView控件为单行显示,且显示的文本太长的话,默认情况下会造成显示不全的情况,这种情况下我们需要设置该控件属性如下: <TextView android:i ...

  3. WGCNA算法研究笔记

    转自:http://www.gogoqq.com/ASPX/8390905/JournalContent/1303140588.aspx 研究了近半年的算法,记录下来给自己一个交代,也应该是考G前地最 ...

  4. Aptana插件安装、配置

    本文讲解在线安装的方式: 1.eclipse->help->Install New SoftWare... 在弹出的对话框Work with中填入[http://download.apta ...

  5. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  6. DELPHI中多线程知识【转】

    本文的内容取自网络,并重新加以整理,在此留存仅仅是方便自己学习和查阅.所有代码均亲自测试 delphi7下测试有效.图片均为自己制作. 多线程应该是编程工作者的基础技能, 但这个基础我从来没学过,所以 ...

  7. Tamper Data 安装与使用

    Tamper Data概览   注意:我将会讲述一些有关Tamper Data的基本常识,包括它的基本功能,如何安装等. Tamper Data是什么?   Tamper Data 的真实含义,即&q ...

  8. HDU-2058-The sum problem（数学题技巧型）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2058 思路: 这题的n,m都很大,很显然直接暴力,会超时,那就不能全部都找了,利用等差数列求和公式, ...

  9. SQL,SP与ORM

    SQL译为按每一次情况的办理,SP意为存储过程,ORM就是对象-关系映射,比如Hibernate 一,演变  刚开始的时候,只有sql语句,即可以用交互模式一句一句执行, 也可以用批模式执行,多行sq ...

  10. java配置环境变量-及原因

    为什么java要配置环境变量? 那就要从java的编译和解析过程说起 java文件的编译和解析过程 一.一个hellow.java文件,要经历先编译(变成hellow.class),再解析(解析成机器 ...