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

+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/30/2018 4:12:40 PM

Satish Kumar Sharma

4 Answers

New Answer

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