css3+js realizes 3D planetary movement

This time I will bring you css3+js to realize 3D planetary operation. What are the precautions for css3+js to realize 3D planetary operation? The following is a practical case, let’s take a look.

HTML part

<p>
        </p><p>
            </p><p></p>  
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>

            <p></p>
            <p></p>
            <p></p>

            <p></p>
            <p></p>
            <p></p>
    
            <!-- 卫星 -->
            <p>
                </p><p>
                    </p><p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>

                    <p></p>
                    <p></p>
                    <p></p>

                    <p></p>
                    <p></p>
                    <p></p>
                
            
        
    

Here, use the first three categories of p for x, y, z to draw the x and x of each planet. The y and z axes, and these planets can be nested, that is, like the code above, the planets inside are satellites of the outer planets.

css part

.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);
}

Mainly uses nine faces to piece together a sphere through various rotations and translations. And because there is no compatibility code written here, friends who are interested in downloading the source code should try to open it with the Chrome browser. There are several CSS3 properties that need to be mentioned here:

1. transform-style: preserve-3d; is used to display the child elements of the container with this property set in a 3D effect.

2. transform-origin: Set the base point position of the rotation and translation of the rotated element.

3. Perspective: Set the view where the element is viewed.

JS part

(function(planetObj, TimeArr, judgeDirec) {
    //检测参数是否规范
    var timeRegexp = /^[1-9][0-9]*$/,
        direcRegexp = /^[01]$/;
    function checkArgs (arg, ele, regexp) {
        if(arg){
            $(arg).each(function (i, item) {
                if(arg.length != planetObj.length || !regexp.test(item)){
                    throw Error('an error occured');
                    return;
                }else{
                    return arg;
                }
            })
        }else{
            arg = [];
            for(var i = 0; i When implementing planetary motion, there are some places that are not handled very well, because I follow every Let the left position of the planet change for a certain period of time, and then calculate the value of top according to the ellipse formula. Because the ellipse is uneven, it will make the movement of the planet appear to be fast and slow, because its top value changes unevenly. <p style="text-align: left;"></p>Then there is another thing that needs attention here, that is, the values ​​calculated by the Math.sqrt() method are all positive numbers, and if we want the planet to circle around, we need to dynamically adjust the left and right ends of the trajectory. Change the positive and negative numbers of the value generated by the Math.sqrt() method. <p style="text-align: left;"></p><p style="text-align: left;"><strong>Attached below is a rendering <span style="color:#ff0000"></span></strong></p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/b7e9f0df3dc53824b95c04374a56b9d4-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website! <p></p>Recommended reading:<p></p><p>Detailed explanation of dynamic loading of css<a href="http://www.php.cn/css-tutorial-389693.html" target="_blank"></a></p><p>How to use the webkit-tap-highlight-color attribute of CSS3<a href="http://www.php.cn/css-tutorial-389685.html" target="_blank"></a></p>

The above is the detailed content of css3+js realizes 3D planetary movement. For more information, please follow other related articles on the PHP Chinese website!