* { margin:0; padding:0; } body { background:url("images/timgq.jpg"); } .wrap { width:800px; height:800px; margin:60px auto; position:relative; } .po { position:absolute; display:inline-block; text-align:center; vertical-align:middle; } .sun { width:100px; height:100px; border-radius:50%; background:url("images/sun1.jpg") no-repeat; background-size:cover; top:350px; left:350px; } .sun1 { width:200px; height:200px; border-radius:50%; border:1px dashed black; top:300px; left:300px; } .sun2 { width:300px; height:300px; border-radius:50%; border:1px dashed grey; top:250px; left:250px; } .sun3 { width:400px; height:400px; border-radius:50%; border:1px dashed black; top:200px; left:200px; } .sun4 { width:500px; height:500px; border-radius:50%; border:1px dashed grey; top:150px; left:150px; } .sun5 { width:600px; height:600px; border-radius:50%; border:1px dashed black; top:100px; left:100px; } .sun6 { width:700px; height:700px; border-radius:50%; border:1px dashed grey; top:50px; left:50px; } .sun7 { width:800px; height:800px; border-radius:50%; border:1px dashed black; top:0; left:0; } .sun8 { width:900px; height:900px; border-radius:50%; border:1px dashed grey; top:-50px; left:-50px; } .er1 { transform-style:preserve-3d; perspective:600px; } .er1 img { width:30px; height:30px; border-radius:50%; position:absolute; top:85px; left:-15px; transform-origin:115px 15px; transition:all 1s linear; } .er2 img { width:40px; height:40px; border-radius:50%; position:absolute; top:125px; left:-20px; transform-origin:171px 15px; transition:all 1s linear; } .er3 img { width:50px; height:50px; border-radius:50%; position:absolute; top:180px; left:-20px; transform-origin:220px 15px; transition:all 1s; } .er4 img { width:40px; height:40px; position:absolute; top:230px; left:-20px; border-radius:50%; transform-origin:270px 15px; transition:all 1s; } .er5 img { width:40px; height:40px; border-radius:50%; position:absolute; top:280px; left:-20px; transform-origin:320px 15px; transition:all 1s; } .er6 img { width:40px; height:40px; position:absolute; top:330px; left:-20px; border-radius:50%; transform-origin:370px 15px; transition:all 1s; } .er7 img { width:40px; height:40px; position:absolute; top:380px; left:-20px; border-radius:50%; transform-origin:420px 15px; transition:all 1s; } .er8 img { width:40px; height:40px; position:absolute; top:430px; left:-20px; border-radius:50%; transform-origin:470px 15px; transition:all 1s linear; } .roll1 { animation:roll 7.5s linear infinite; } .roll2 { animation:roll 18s linear infinite; } .roll3 { animation:roll 30s linear infinite; } .roll4 { animation:roll 54s linear infinite; } .roll5 { animation:roll 354s linear infinite; } .roll6 { animation:roll 870s linear infinite; } .roll7 { animation:roll 2520s linear infinite; } .roll8 { animation:roll 4950s linear infinite; } @keyframes roll { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
transform-style: preserve-3d;perspective: 600px;3d动画前:需要设置3d场景,以及景深效果行星旋转时应该要设置她的旋转中心transform-origin为太阳