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 class="path-Saturn">
        <p id="Saturn" title="土星">
            <p class="x"></p>  
            <p class="y"></p>
            <p class="z"></p>
            <p class="space space-x"></p>
            <p class="space space-x1"></p>
            <p class="space space-x2"></p>

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

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

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

                    <p class="space space-z"></p>
                    <p class="space space-z1"></p>
                    <p class="space space-z2"></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 < planetObj.length; i++){
                arg.push(ele);
            }
        }
        return arg;
    }
    TimeArr = checkArgs(TimeArr, 50, timeRegexp);
    judgeDirec = checkArgs(judgeDirec, 1, direcRegexp);

    var PathArr = [];
    $(planetObj).each(function (i, item) {
        var n = 0;  //定义一个标识，来判断当前是怎么运动的
        PathArr.push({
            a : $(item).parent().width() / 2,
            b : $(item).parent().height() / 2
        });

        //变化x坐标，然后根据椭圆轨迹，获得y坐标，以达到运动的效果
        function getEllopsePath (x, PathObj) {
            x = x - PathObj.a;
            var m;

            n ? (judgeDirec[i] ? m = 1 : m = -1) : (judgeDirec[i] ? m = -1 : m = 1); //判断开根号求得的y值是否为负数，从而确定旋转方向
            // if(judgeDirec[i]){
            //     n ? (m = judgeDirec[i]) : (m = judgeDirec[i]-2);  
            // }else{
            //     n ? (m = judgeDirec[i] - 1) : (m = judgeDirec[i] + 1);
            // }
            return Math.sqrt((1 - x * x / (PathObj.a * PathObj.a)) * PathObj.b * PathObj.b) * m + PathObj.b; 
        }

        function moving () {
            var x = parseInt($(item).css('left'), 10);
            if(x == 2 * PathArr[i].a){  //到达轨迹的右零界点的时候x减小
                n--;
            }else if (x == 0) {   //到达轨迹的左临界点的时候，x增加
                n++;
            }
            n ? x++ : x--;
            $(item).css({
                'top' : getEllopsePath(x, PathArr[i]) + 'px',
                'left' : x + 'px'
            });
        }

        setInterval(moving, TimeArr[i]);
    });
})(['#Saturn', '#earth', '#Venus', '#Neptune', '#Mercury', '#Jupiter', '#satellite', '#moon'], [40, 180, 240, 20, 120, 200, 30, 10]/*option默认为50毫秒*/, [1, 0, 0, 0, 1, 0, 1, 1]/*option 判断运动方向，0为顺时针，1为逆时针，默认为逆时针*/);

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.

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.

Attached below is a rendering

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!

Recommended reading:

Detailed explanation of dynamic loading of css

How to use the webkit-tap-highlight-color attribute of CSS3

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!