无限旋转 DIV 但具有绝对定位

Question

我遇到了一个问题，我有一个带有绝对位置的 div，我正在尝试无限循环地旋转它 360 度。但是，如果我使用 transform: translate (-50%,-50%) 来完全居中这个 div，它将无法正常工作。

HTML

<div class="randomName"></div>

CSS

.randomName {
background-color: orange;
width: 1500px;
height: 1500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: orbita 2s linear infinite;
-webkit-animation: orbita 2s linear infinite;
-moz-animation: orbita 2s linear infinite;
-o-animation: orbita 2s linear infinite;
}

@keyframes orbita {
0%  {transform: rotate(0deg);}
100% {transform: rotate(360deg);}  
}

不确定为什么不起作用。有人可以指导我吗？谢谢！

Answer 1

使用动画时，您通过指定一个新变换覆盖初始变换属性。相反，您需要附加旋转以进行翻译，以使它们都正常工作：

.randomName {
  background-color: orange;
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: orbita 2s linear infinite;
  -webkit-animation: orbita 2s linear infinite;
  -moz-animation: orbita 2s linear infinite;
  -o-animation: orbita 2s linear infinite;
}

@keyframes orbita {
  0% {
    transform:translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform:translate(-50%, -50%) rotate(360deg);
  }
}

<div class="randomName"></div>

另一种解决方案是使用另一种方式使元素居中并保持动画原样。

下面是一个使用 flex 使元素居中的例子：

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.randomName {
  background-color: orange;
  width: 150px;
  height: 150px;
  animation: orbita 2s linear infinite;
  -webkit-animation: orbita 2s linear infinite;
  -moz-animation: orbita 2s linear infinite;
  -o-animation: orbita 2s linear infinite;
}

@keyframes orbita {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="randomName"></div>

无限旋转 DIV 但具有绝对定位

Endless Rotating DIV but with Absolute Positioning

html

css

css-transforms

css-animations