Home >Web Front-end >CSS Tutorial >css3 plus js to create a simple 3D planetary motion effect example code
css3 plus js to create a simple 3D planetary motion effect example code
- 高洛峰Original
- 2017-02-11 13:39:221347browse
This article mainly introduces CSS3 plus JS to create a simple 3D planetary motion effect example code. The effect is very cool. If you want to know more about it, you can learn about it.
I saw an article about CSS3D planetary motion in the garden a few days ago. I thought this effect was too cool, so I tried it on a whim. Because I was too lazy to use any plug-ins, I wrote it in native JS. The effect was a bit rough, and there were some areas that were not handled very well. If you have any good suggestions, please leave a message and let me know. Thank you very much. Okay, without further ado, the code is attached below.
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 we 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 <p></p><p>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 find 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><p>Then there is another thing to note 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><p>A rendering is attached below</p><p><img alt="css3 plus js to create a simple 3D planetary motion effect example code" src="https://img.php.cn/upload/article/000/000/013/76e74c3adf658959e8d478e32a10501b-0.png" style="max-width:90%" style="max-width:90%" title="css3 plus js to create a simple 3D planetary motion effect example code"></p><p>The above is the entire content of this article. I hope it will be helpful to everyone’s learning, and I also hope everyone will support PHP. Chinese website. </p><p>For more css3 plus js to create a simple 3D planetary motion effect example code related articles, please pay attention to the PHP Chinese website! </p>