时间戳

首页 > 解决方案 > 为什么旋转时元素的位置会发生变化？

html - 为什么旋转时元素的位置会发生变化？

问题描述

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

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>

标签： htmlcssanimation

解决方案

问题是您正在使用transform: translate(-50% , -50%);将元素居中，但在您的@keyframes覆盖transform中rotation()覆盖了您的translate(). 如果您也将translate()动画放入您的 div 将旋转，因为origin（旋转的锚点）每帧都会不同。

因此，您可以： 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了，因为你不需要它。您正在使用animationnot transition。

推荐阅读