用js，css3 做的一个球

用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>

 

posted on 2017-03-02 16:31  凛冬  阅读(421)  评论(0)  编辑  收藏  举报