CSS3 Add JS to make a simple 3D planetary operation effect instance code

This article mainly introduces CSS3 plus JS to do a simple 3D planetary operation effect instance code, the effect is very cool, there is a want to go to understand.

A few days ago in the garden saw an article about the operation of the Css3d planet, feeling the effect is too cool to dazzle, so he also on the whim of the attempt to do a bit. Because too lazy to use what plug-in, so on the original JS write, the effect is a bit rough, there are some places to deal with is not very good, if there are good suggestions million hope message to inform, greatly appreciated. Ok, don't talk nonsense, the following code is attached.

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

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.