+ 4
Problem with transform translate when start animation
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
4 ответов
+ 7
Satish Remove
transform: translate(-50%,-50%);
and change value @
top:150px;
left:110px;
+ 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.
+ 2
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;
}
0
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....