Генератор transform

Порядок функцій міняє результат

Браузер застосовує функції transform зліва направо, і кожна наступна працює вже в системі координат, яку залишила попередня.

Тому rotate(45deg) translateX(100px) посуне елемент по діагоналі — уздовж уже поверненої осі, — а translateX(100px) rotate(45deg) спершу відсуне вбік і лише тоді крутне на місці. Перемкніть «Порядок» в інструменті й подивіться самі.

Це найчастіша причина «чому воно поїхало не туди».

Transform не займає місця

Зсунутий, збільшений чи повернений елемент лишає своє початкове місце зайнятим: сусіди не посуваються, розкладка не перераховується. Саме тому transform дешевий для анімацій — браузер не переобчислює геометрію сторінки.

Зворотний бік: збільшений елемент накриє сусідів, а не розштовхає їх.

Відсотки рахуються від самого елемента

translateX(50%) зсуває на половину власної ширини елемента, а не батьківської — на відміну від left: 50%, який рахує від контейнера.

Звідси відомий прийом центрування: left: 50% ставить лівий край у середину батька, а translateX(-50%) відтягує елемент назад на половину його самого.

Той самий підступ із position: fixed

Як і filter, будь-який непорожній transform робить елемент containing block для нащадків із position: fixed — і ті перестають триматися вікна.