我們都知道,球無論怎麼旋轉,無論從哪個角度看過去都是圈形所以,只要我們將球表面的圖案圍繞著球心轉動,看起來就是球在轉動

point 是將裡面的元素進行3D旋轉,使之有一個躺下的效果

face  face2 是兩隻眼睛圍繞的中心

html部分:

<div class="bg">
        </div>
        <div class="point">
            <div class="face">
                <div class="eyes left"></div>
            </div>
            <div class="face2">
                <div class="eyes right"></div>
            </div>

        </div>
 

css部分:

 body{
            background-color: palegoldenrod;
        }
       .bg{
            border-radius: 100%;
            width: 80px;
            height: 80px;
            background-color:white;
            left: 360px;
            top:220px;
            position: absolute;
            box-shadow: 0 0 5px white;
           position: absolute;
        }
        .point{
            border-radius: 100%;
            width: 10px;
            height: 10px;
            left: 200px;
            top: 200px;
            position: absolute;
            -webkit-animation-name:orbit-path;
            transform-style: preserve-3d;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration:10s;

        }
        .face{
            border-radius: 100%;
            width: 10px;
            height: 10px;
            background-color: white;
            left: 200px;
            top:200px;
            box-shadow: 0 0 5px white;
            position: absolute;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration:10s;
            -webkit-animation-name:face;
            backface-visibility:hidden;

        }
        .face2{
            border-radius: 100%;
            width: 10px;
            height: 10px;
            background-color: white;
            left: 200px;
            top:200px;
            box-shadow: 0 0 5px white;
            position: absolute;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration:10s;
            -webkit-animation-name:face2;
            backface-visibility:hidden;
        }

        .eyes{
            border-radius: 100%;
            width: 12px;
            height: 10px;
            background-color: gray;
            position: absolute;
            backface-visibility:hidden;

        }
        .left{
            left: 20px;
            top: 30px;
        }
        .right{
            left: 20px;
            top: 30px;

        }

        @-webkit-keyframes face{
            from { transform: rotateZ(0deg)}
            to {transform:rotateZ(360deg)}
        }
        @-webkit-keyframes orbit-path {
            from { transform: rotateX(60deg) translateZ(60px)}
            to { transform: rotateX(60deg) translateZ(60px)}
        }
        @-webkit-keyframes face2{
            from { transform: rotate(60deg)}
            to {transform:rotate(420deg)}
        }
 

        但是,如果我們的背景圖片不變的話,將背景形狀設定為原型,圖案左右移動的話也會有一個旋轉球的效果

比如下面一個例子:

    html部分:

<div class="bg">
        <div class="face">
            <div class="eyes left"></div>
            <div class="eyes right"></div>
            <div class="smail"></div>
        </div>
    </div>
 

 .bg{
            border-radius: 100%;
            background-color: wheat;
            left: 200px;
            top: 200px;
            position: absolute;
            width: 100px;
            height: 100px;
            overflow: hidden;
            transform-style: preserve-3d;
            -webkit-animation-duration:5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;

        }
        .face{
            border-radius: 100%;
            background-color: wheat;
            position: absolute;
            width: 100px;
            height: 100px;
            overflow: hidden;
            transform-style: preserve-3d;
            -webkit-animation-duration:5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft2;
        }
        .eyes{
            border-radius: 100%;
            background-color: #394057;
            width: 10px;
            height: 10px;
        }
        .left{
            top:30px;
            left: 25px;
            position: absolute;
        }
        .right{
            top:30px;
            left: 60px;
            position: absolute;
        }
        .smail{
            border-radius: 100%;
            border-bottom:2px solid #394057 ;
            width: 50px;
            height: 30px;
            top: 40px;
            left: 20px;
            position: absolute;
        }
        @-webkit-keyframes weft2{
            0% {left:-100px;}

            100%{ left: 100px;}
        }
        @-webkit-keyframes weft3{
            0% {
                    left: 200px;
                    top:200px;
            }

            25%{
                    left: 180px;
                    top:150px;
            }
            50%{
                left: 160px;
                top:120px;
            }
            75%{
                left: 140px;
                top:150px;
            }
            100%{
                left: 100px;
                top:200px;
            }
        }

css部分: