Css3+js realizes 3D Planetary operation

This time to bring you css3+js to achieve 3D planetary operation, CSS3+JS to achieve 3D planetary operation of the attention matters, the following is the actual case, together to see.

HTML section

<p class= "Path-saturn" > <p id= "Saturn" title= "Saturn" > <p class= "x" ></p> <p class= "y" ></p> <p class= "z" ></p> <p class= "Space Space-x" ></p&            Gt <p class= "Space space-x1" ></p> <p class= "Space space-x2" ></p> <p class= "s Pace space-y "></p> <p class=" Space space-y1 "></p> <p class=" Space Space-y2 "&            gt;</p> <p class= "Space space-z" ></p> <p class= "Space Space-z1" ></p> <p class= "Space space-z2" ></p> <!--satellites--<p class= "Path-satelli                    TE "> <p id=" Satellite "title=" Satellite "> <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-y 1 "></p> <p class=" Space space-y2 "></p> <p class=" Space space -Z "></p> <p class=" Space space-z1 "></p> <p class=" Space Spac E-Z2 "></p> </p> </p> </p> </p>

Here the x, Y, Z axes of each planet are drawn with the first three classes of P, X, Y, Z, and then the planets can be nested, just like the code above, where the planets are satellites of the outer planets.

CSS Section

. Path-saturn,. Path-earth,. Path-venus,. Path-neptune,. Path-jupiter,. Path-mercury,. Path-satellite,. path-moon{posi    Tion: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 axis */.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);} 

The main thing is to put together a sphere with nine faces through various rotations and pans. Then because there is no code to write compatibility, so interested in down the source code of Friends, try to open with Chrome browser. Here are a few CSS3 properties that need to be said:

1, transform-style:preserve-3d; Used to show the child elements of the container that set the property as a "."

2. Transform-origin: Sets the rotation of the rotation element, the base point position of the translation.

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

JS section

(Function (Planetobj, Timearr, Judgedirec) {//Test parameter specification 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, timeregexp);    Judgedirec = Checkargs (Judgedirec, 1, direcregexp);    var patharr = [];  $ (planetobj). Each (function (i, item) {var n = 0; Define an identity to determine how the current movement is Patharr.push ({a: $ (item). Parent (). Width ()/2, B: $ (item). parent (). He        Ight ()/2}); Changes the x-coordinate, then obtains the y-coordinate according to the ellipse trajectory, achieves the motion the effectFruit function Getellopsepath (x, pathobj) {x = x-pathobj.a;            var m; N? (Judgedirec[i]? m = 1:m =-1): (Judgedirec[i]? m = -1:m = 1); Determine if the Y value obtained by the open square root is negative, thus determining the direction of rotation//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) {//arrive at the right 0 points of the trajectory x decrease n--;            }else if (x = = 0) {//reaches the left critical point of the trajectory, X increases 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 default is 50 milliseconds */, [1, 0, 0, 0, 1, 0, 1, 1]/*option to determine the direction of movement, 0 is clockwise, 1 is counterclockwise, the default is counterclockwise */);

Here in the realization of the planetary movement, there are some places that are not very good, because I am at every certain time, let the planet's left position changes, and then according to the Oval formula, the value of the top. Because the ellipse is uneven, it makes the motion of the planet appear to be fast and slow, because his top value changes unevenly.

And then there's a place to pay attention, is math.sqrt () This method to open the value is all positive, and we want to let the planet around a week, we need to change the trajectory of the left and right sides of the math.sqrt () This method to open the value of the positive negative number.

Attached below is a

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Dynamic loading of CSS explanations

How the Webkit-tap-highlight-color property of CSS3 is used