Maison >interface Web >tutoriel CSS >css3 plus js pour créer un exemple de code simple d'effet de mouvement planétaire 3D
css3 plus js pour créer un exemple de code simple d'effet de mouvement planétaire 3D
- 高洛峰original
- 2017-02-11 13:39:221368parcourir
Cet article présente principalement CSS3 plus js pour créer un exemple de code simple d'effet de mouvement planétaire 3D L'effet est très cool. Si vous voulez en savoir plus, vous pouvez en apprendre davantage.
Il y a quelques jours, j'ai vu un article sur le mouvement planétaire CSS3D dans le jardin. J'ai trouvé cet effet trop cool, alors je l'ai essayé sur un coup de tête. Parce que j'étais trop paresseux pour utiliser des plug-ins, je l'ai écrit en JS natif. L'effet était un peu rude et certains domaines n'étaient pas très bien gérés. Si vous avez de bonnes suggestions, veuillez laisser un message et. faites le moi savoir. Merci beaucoup. D'accord, sans plus tarder, le code est joint ci-dessous.
Partie HTML
<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>
Ici nous utilisons les trois premières catégories de p pour dessiner chaque planète : x, y, z x, Les axes y, z, et ces planètes peuvent être imbriquées, c'est-à-dire que, tout comme le code ci-dessus, les planètes intérieures sont les satellites des planètes extérieures.
partie CSS
.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);
}
Utilise principalement neuf faces pour reconstituer une sphère à travers diverses rotations et traductions. Et comme aucun code de compatibilité n'est écrit ici, les amis souhaitant télécharger le code source devraient essayer de l'ouvrir avec le navigateur Chrome. Plusieurs attributs CSS3 doivent être mentionnés ici :
1. transform-style:preserve-3d; est utilisé pour afficher les éléments enfants du conteneur avec cet attribut défini dans un effet 3D.
2. transform-origin : définissez la position du point de base de la rotation et de la translation de l'élément pivoté.
3. perspective : définissez la vue dans laquelle l'élément est affiché.
Partie JS
(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>Lors de la mise en œuvre du mouvement planétaire, il y a certains endroits qui ne sont pas très bien gérés, car je suis régulièrement intervalles, laissez la position gauche de la planète changer, puis trouvez la valeur de top selon la formule de l'ellipse. Parce que l’ellipse est inégale, le mouvement de la planète semblera rapide et lent, car sa valeur maximale change de manière inégale. </p><p> Ensuite, il y a une autre chose qui mérite attention ici, c'est-à-dire que les valeursextraites par la méthode Math.sqrt() sont toutes des nombres positifs, et si nous voulons que la planète tourne autour, nous besoin d'ajuster dynamiquement les extrémités gauche et droite de la trajectoire. Modifiez les nombres positifs et négatifs de la valeur générée par la méthode Math.sqrt(). </p><p>Un rendu est joint ci-dessous</p><p><img alt="css3 plus js pour créer un exemple de code simple deffet de mouvement planétaire 3D" 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 pour créer un exemple de code simple deffet de mouvement planétaire 3D"></p><p>Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère que tout le monde. prendra en charge le site Web chinois. </p><p>Pour plus d'articles sur CSS3 et JS permettant de créer un exemple simple de code d'effet de mouvement planétaire 3D, veuillez faire attention au site Web PHP chinois ! </p>