英文:
Why its rotation is on ellipse shape
问题
所以我有一个叫做"orbitmercury"的动画，应该是以圆形旋转的，但出于某种原因它是在椭圆轨道上。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background: black;
}
#sun {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
width: 5rem;
height: 5rem;
border: 1 solid red;
background: yellow;
border-radius: 50%;
}
#mercury {
position: absolute;
z-index: 98;
top: 50%;
left: 48%;
width: 1rem;
height: 1rem;
border: 1 solid black;
background: gray;
border-radius: 50%;
animation: orbitmercury 2s linear infinite;
}
@keyframes orbitmercury {
from {
transform: rotate(0deg) translate(10rem);
}
to {
transform: rotate(360deg) translate(10rem);
}
}
我实际上在YouTube上看到了这个，决定自己尝试，但出于某种原因它是在椭圆轨道上。我也不知道rotate()可以从它的原始位置旋转。
对于我的愚蠢问题，我深感抱歉，我还在学习CSS动画。请原谅我的语法不佳。
英文:
So I had this animation name "orbitmercury" which suppose to rotate in circle shape but for some reason it is on elliptical orbit
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background: black;
}
#sun {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
width: 5rem;
height: 5rem;
border: 1 solid red;
background: yellow;
border-radius: 50%;
}
#mercury {
position: absolute;
z-index: 98;
top: 50%;
left: 48%;
width: 1rem;
height: 1rem;
border: 1 solid black;
background: gray;
border-radius: 50%;
animation: orbitmercury 2s linear infinite;
}
@keyframes orbitmercury {
from {
transform: rotate(0deg) translate(10rem);
}
to {
transform: rotate(360deg) translate(10rem);
}
}
<!-- language: lang-html -->
<div id="sun">
</div>
<div id="mercury">
</div>
<!-- end snippet -->
I actually just saw this on yt and I decided to try it for myself but for some reason its on ellipse orbit. I also didnt know that the rotate() can go rotate from its orig position.
My apologies for this dumb question of mine Im still learning CSS animation. Please excuse my poor grammar as well.
答案1
得分: 1
我认为你的错误来自于缺少的 transform translate（用于移动 div 的原点并将其放在中间）。
我尝试在两个行星上都添加了它，看起来像这样工作。
#sun {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
width: 5rem;
height: 5rem;
border: 1 solid red;
background: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
}
#mercury {
position: absolute;
z-index: 98;
top: calc(50% - 0.5rem);
left: calc(50% - 0.5rem);
width: 1rem;
height: 1rem;
border: 1 solid black;
background: gray;
border-radius: 50%;
animation: orbitmercury 2s linear infinite;
}
更多详情请查看：https://codepen.io/ColinMsd/pen/YzRWXLZ
编辑：
现在应该更好了，只需根据正确的高度/宽度更改水星的位置。
英文:
I think you error is coming from the missing transform translate (used to move the origin point of your div and put it in the middle.)
I tried to add it on both of the planets and it look like it's working like that.
#sun {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
width: 5rem;
height: 5rem;
border: 1 solid red;
background: yellow;
border-radius: 50%;
transform: translate(-50%, -50%)
}
#mercury {
position: absolute;
z-index: 98;
top: calc(50% - 0.5rem);
left: calc(50% - 0.5rem);
width: 1rem;
height: 1rem;
border: 1 solid black;
background: gray;
border-radius: 50%;
animation: orbitmercury 2s linear infinite;
}
More detail: https://codepen.io/ColinMsd/pen/YzRWXLZ
EDIT :
Should be better now just add to change the mercury position with the proper height/width.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论