Problem with transform translate when start animation

Question

I want to rotate the div in center but when it rotate it go right bottom. So I want that any friend tell me what is the problem in this coding.
https://code.sololearn.com/W7NF1uQR3kQi/?ref=app

Answer 1

Satish Remove
transform: translate(-50%,-50%);

and change value @
top:150px;
left:110px;

Answer 2

The use of transform: translate is what is causing the issue. I don't know the exact reason for this, but here's a solution:
https://code.sololearn.com/WqyEbhF9CB3x

Using calc you can write a mathematical expression to calculate certain css properties.

Answer 3

Hi Satish and Zeke

You can also do it without calc like this

#moon{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height:150px;
width:150px;
background: orange;
animation:spin 2s linear;
animation-delay:1s;
}

Answer 4

U can try it like this,
In animation write the below code
@keyframes spin
{ 0% {
Transform:translate(-50%,-50%) rotateZ(0deg);
}

100%{
Transform:translate(-50%,-50%) rotateZ(360deg);
}
}

It works....