无尽的旋转DIV，但绝对定位 [英] Endless Rotating DIV but with Absolute Positioning

问题描述

我面临一个问题，我有一个绝对位置的div，并且我试图用无限循环旋转360度。但是，如果我使用transform：translate（-50％， - 50％）来完全居中这个div，它将无法正常工作。 HTML

 < div class =randomName>< / div> 
  

CSS

  .randomName {
 background-color：orange; 
 width：1500px; 
 height：1500px; 
位置：绝对; 
剩下：50％; 
 top：50％; 
 transform：translate（-50％， -  50％）; 
动画：orbita 2s线性无限; 
 -webkit-animation：orbita 2s线性无限; 
 -moz-animation：orbita 2s线性无限; 
 -o-animation：orbita 2s线性无限; 
 
 $ b @keyframes orbita {
 0％{transform：rotate（0deg）;} 
 100％{transform：rotate（360deg）;} 
} 
  

不知道为什么不能正常工作。有人可以指导我吗？谢谢！

解决方案

使用动画时，通过指定一个新的变量属性覆盖 。相反，你需要追加旋转来翻译，以保持它们的工作：

.randomName {background-color：orange;宽度：150px; height：150px;位置：绝对;剩下：50％;顶部：50％;变换：翻译（-50％，-50％）;动画：orbita 2s线性无限; -webkit-animation：orbita 2s线性无限; -moz-animation：orbita 2s线性无限; -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;显示：flex; align-items：center; justify-content：center;}。randomName {background-color：orange;宽度：150px; height：150px;动画：orbita 2s线性无限; -webkit-animation：orbita 2s线性无限; -moz-animation：orbita 2s线性无限; -o-animation：orbita 2s linear infinite;} @ keyframes orbita {0％{transform：rotate（0deg）; } 100％{transform：rotate（360deg）; }}

 < div class =randomName> < / div>  

I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly.

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);}  
}

Not sure why is not working. Can someone guide me? thanks!

解决方案

When using the animation you are overriding the initial transform property by specifying a new one. Instead you need to append rotation to translate in order to keep both of them working:

.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>

Another solution is to center your element using another way and keep the animation as it is.

Here is an example using flex to center the element:

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，但绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！