Problem with transform translate when start animation | Sololearn: Learn to code for FREE!


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.

4/30/2018 4:12:40 PM

Satish Kumar Sharma

4 Answers

New Answer


Satish Remove transform: translate(-50%,-50%); and change value @ top:150px; left:110px;


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: Using calc you can write a mathematical expression to calculate certain css properties.


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


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