为什么旋转时元素的位置会改变?

问题描述 投票:0回答:1

当元素旋转时,它不在中间并移动。

CSS:

div {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 16px solid rgb(235, 235, 235);
border-top: 16px solid rgb(83, 83, 192);
border-radius: 50%;
animation: loading 2s linear infinite;
transition-property: transform;
transform: translate(-50% , -50%);}

@-moz-kayframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}

}

和HTML:

<div></div>
html css animation
1个回答
0
投票

问题是您正在使用transform: translate(-50% , -50%);将元素居中,但在@keyframes中,您会被transform覆盖rotation(),从而覆盖了translate()。如果您也将translate()放到动画中,由于origin(旋转的锚点)每帧都不同,因此div也会旋转。

因此,您可以:1)以lefttop为中心,如下所示:

div {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border: 16px solid rgb(235, 235, 235);
  border-top: 16px solid rgb(83, 83, 192);
  border-radius: 50%;
  animation: loading 2s linear infinite;
  /*transform: translate(-50% , -50%);*/
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div></div>

2)或使用一些父元素将居中,并且动画div将位于其中。

.child {
  width: 100px;
  height: 100px;
  border: 16px solid rgb(235, 235, 235);
  border-top: 16px solid rgb(83, 83, 192);
  border-radius: 50%;
  animation: loading 2s linear infinite;
}
.parent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div class="parent">
  <div class="child"></div>
</div>

+我已删除transition-property,因为您不需要它。您正在使用animation而不是transition

© www.soinside.com 2019 - 2024. All rights reserved.