Почему не работает анимация transform: translateX?

Question

[Bob Clapton]

Если сделать анимацию по свойству "left" то картинка анимируется, а вот на translateX работать не хочет почему так?

Comments

[Вадим]

https://qna.habr.com/help/rules
3.8, только выкладывать лучше сейчас на codepen

Answer 1

[its2easyy]

transform на элементе применяется только одной записью, поэтому применяется только сначала translate, а потом rotate его перезаписывает. А left это отдельное свойство, поэтому оно работает одновременно. Нужно все трансформации в одной записи указывать,
transform: translate(-100px) rotate(360deg), либо добавлять к элементу обертку, и второй трансформ вешать на неё.

Comments

[Bob Clapton]

Спасибо большое!