用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. C#、C++用GDAL读shp文件（转载）

    C#.C++用GDAL读shp文件 C#用GDAL读shp文件 (2012-08-14 17:09:45) 标签: 杂谈 分类: c#方面的总结 1.目前使用开发环境为VS2008+GDAL1.81 ...

  2. Linux服务器开发/测试环境搭建-流程

    1.MariaDB yum 安装/初始化/授远程权限 yum安装 在MariaDB官网根据Linux系统查找您所需要的db版本:https://downloads.mariadb.org/mariad ...

  3. 手动写一个Servlet

    一.做一个类,派生自HttpServlet 1.导两个包 javax.servlet.*; javax.servlet.http.* 2.重写两个方法doGet,doPost 打开tomcat中的se ...

  4. 如何在Windows Server 2016启用或关闭Internet Explorer增强的安全配置

    一般我们安装完服务器后,开启 Internet Explorer 会发现无法上网或者上网内容被屏蔽掉了 问题的发生原因 在 Windows Server 2016 通常扮演重要的服务器角色,不应该用来 ...

  5. Android环境搭建与HelloWorld

    引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...

  6. Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置

    Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...

  7. 支付宝 Android 版使用的开源组件

    支付宝 Android 版使用的开源组件 前言: 花了点时间整理了 支付宝 Android 客户端使用的开源组件,给需要的同学.在你不知道用什么开源框架的时候可以作下参考,毕竟支付宝是阿里的重量级产品 ...

  8. [html5]学习笔记一 新增的非主体结构元素

    html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...

  9. duilib绘制边框

    在使用Duilib时,有时候需要绘制边框,绘制边框时候,上下左右都会有边框线:可在使用时,有时候不需要绘制四边(如果绘制四边,两个有边框的控制放在一起,就有一边会很粗),那该如何处理?,其实用法很简单 ...

  10. pom.xml配置详解

    <!--可以免费转载,转载时请注明出处  http://pengqb.iteye.com .--><project xmlns="http://maven.apache.o ...