Endless Rotating DIV but with Absolute Positioning - html

Question

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!

Answer 1

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>