css3加js做一个简单的3D行星运转效果实例代码

<div class="path-Saturn">
        <div id="Saturn" title="土星">
            <div class="x"></div>  
            <div class="y"></div>
            <div class="z"></div>
            <div class="space space-x"></div>
            <div class="space space-x1"></div>
            <div class="space space-x2"></div>

            <div class="space space-y"></div>
            <div class="space space-y1"></div>
            <div class="space space-y2"></div>

            <div class="space space-z"></div>
            <div class="space space-z1"></div>
            <div class="space space-z2"></div>
    
            <!-- 卫星 -->
            <div class="path-satellite">
                <div id="satellite" title="卫星">
                    <div class="x"></div>
                    <div class="y"></div>
                    <div class="z"></div>
                    <div class="space space-x"></div>
                    <div class="space space-x1"></div>
                    <div class="space space-x2"></div>

                    <div class="space space-y"></div>
                    <div class="space space-y1"></div>
                    <div class="space space-y2"></div>

                    <div class="space space-z"></div>
                    <div class="space space-z1"></div>
                    <div class="space space-z2"></div>
                </div>
            </div>
        </div>
    </div>

.path-Saturn, .path-earth, .path-Venus, .path-Neptune, .path-Jupiter, .path-Mercury, .path-satellite, .path-moon{
    position: absolute;
    width: 95%;
    height: 95%;
    top: 2.5%;
    left: 2.5%;
    border: 1px solid #ddd;
    border-radius: 50%;
    transform: rotateX(60deg);
    transform-style: preserve-3d;
}
#sun, #earth, #Saturn, #Venus, #Neptune, #Jupiter, #Mercury, #satellite, #moon{
    width: 160px;
    height: 160px;
    position: absolute;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
    animation: rotateForward 10s linear infinite;
    cursor: pointer;
    transform: translateZ(-80px);
}
/*x, y, z轴*/
.x, .y, .z{  
    position: absolute;
    height: 100%;
    border: 1px solid #999;
    left: 50%;
    margin-left: -1px;
}
.y{
    transform: rotateZ(90deg);
}
.z{
    transform: rotateX(90deg);
}
@keyframes  rotateForward {
    0%{
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100%{
        transform: rotate3d(1, 1, 1, -360deg);
    }
}
/*Saturn*/
#Saturn{
    width: 80px;
    height: 80px;
    left: 0%;
    margin: -40px 0 0 -40px;
    animation: rotateForward 4s linear infinite;
    transform: translateZ(-40px);
}
#Saturn .space{
    width: 80px;
    height: 80px;
    box-shadow: 0 0 60px rgba(90, 80, 53, 1);
    background-color: rgba(90, 80, 53, .3);
}
#Saturn .space-x1, #Saturn .space-x2, #Saturn .space-y1, #Saturn .space-y2, #Saturn .space-z1, #Saturn .space-z2{
    width: 87.5%;
    height: 87.5%;
    top: 6.25%;
    left: 6.25%;
    transform: rotate3d(0, 0, 0, 0deg) translateZ(20px);
}
#Saturn .space-x1{
    transform: rotate3d(0, 0, 0, 0deg) translateZ(-20px);
}
#Saturn .space-y{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(0px);
}
#Saturn .space-y1{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(-20px);
}
#Saturn .space-y2{
    transform: rotate3d(0, 1, 0, 90deg) translateZ(20px);
}
#Saturn .space-z{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(0px);
}
#Saturn .space-z1{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(-20px);
}
#Saturn .space-z2{
    transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
}