Heim >Web-Frontend >CSS-Tutorial >css3 plus js, um einen einfachen Beispielcode für einen 3D-Planetenbewegungseffekt zu erstellen
css3 plus js, um einen einfachen Beispielcode für einen 3D-Planetenbewegungseffekt zu erstellen
- 高洛峰Original
- 2017-02-11 13:39:221355Durchsuche
In diesem Artikel wird hauptsächlich CSS3 plus JS zum Erstellen eines einfachen Beispielcodes für 3D-Planetenbewegungen vorgestellt. Der Effekt ist sehr cool. Wenn Sie mehr darüber erfahren möchten.
Vor ein paar Tagen habe ich einen Artikel über CSS3D-Planetenbewegung im Garten gesehen. Ich fand diesen Effekt zu cool, also habe ich ihn aus einer Laune heraus ausprobiert. Da ich zu faul war, Plug-Ins zu verwenden, habe ich es in nativem JS geschrieben. Der Effekt war etwas grob und es gab einige Bereiche, die nicht sehr gut behandelt wurden. Wenn Sie gute Vorschläge haben, hinterlassen Sie bitte eine Nachricht Lass es mich wissen. Vielen Dank. Okay, ohne weitere Umschweife, der Code ist unten angehängt.
HTML-Teil
<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>
Hier verwenden wir die ersten drei Kategorien von p, um jeden Planeten zu zeichnen: x, y, z x, y- und z-Achsen, und diese Planeten können verschachtelt sein, das heißt, genau wie im obigen Code sind die inneren Planeten Satelliten der äußeren Planeten.
CSS-Teil
.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);
}
Verwendet hauptsächlich neun Flächen, um durch verschiedene Drehungen und Verschiebungen eine Kugel zusammenzusetzen. Und da hier kein Kompatibilitätscode geschrieben ist, sollten Freunde, die daran interessiert sind, den Quellcode herunterzuladen, versuchen, ihn mit dem Chrome-Browser zu öffnen. Es gibt mehrere CSS3-Attribute, die hier erwähnt werden müssen:
1. Transform-Style: Preserve-3d wird verwendet, um die untergeordneten Elemente des Containers mit diesem Attributsatz in einem 3D-Effekt anzuzeigen.
2. Transformationsursprung: Legen Sie die Basispunktposition der Drehung und Verschiebung des gedrehten Elements fest.
3. Perspektive: Legen Sie die Ansicht fest, in der das Element angezeigt wird.
JS-Teil
(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>Bei der Implementierung von Planetenbewegungen gibt es einige Stellen, die nicht sehr gut gehandhabt werden, weil ich regelmäßig folge Lassen Sie in Intervallen die linke Position des Planeten ändern und ermitteln Sie dann den Wert von oben gemäß der Ellipsenformel. Da die Ellipse ungleichmäßig ist, erscheint die Bewegung des Planeten schnell und langsam, da sich ihr Spitzenwert ungleichmäßig ändert. </p><p> Dann gibt es noch eine weitere Sache, die hier beachtet werden muss, nämlich, dass die von der Math.sqrt()-Methode extrahierten Werte alle positive Zahlen sind, und wenn wir wollen, dass der Planet umkreist, dann tun wir das Sie müssen das linke und rechte Ende der Flugbahn dynamisch anpassen. Ändern Sie die positiven und negativen Zahlen des von der Math.sqrt()-Methode generierten Werts. </p><p>Eine Darstellung ist unten beigefügt</p><p><img alt="css3 plus js, um einen einfachen Beispielcode für einen 3D-Planetenbewegungseffekt zu erstellen" 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, um einen einfachen Beispielcode für einen 3D-Planetenbewegungseffekt zu erstellen"></p><p>Das Obige ist der gesamte Inhalt dieses Artikels und ich hoffe, dass er für alle hilfreich ist wird PHP unterstützen. </p><p>Weitere Artikel zu CSS3 plus JS zum Erstellen eines einfachen Beispielcodes für einen 3D-Planetenbewegungseffekt finden Sie auf der chinesischen PHP-Website! </p>