transform
Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
Синтаксис
transform: function() …;Значения
| Параметр | Тип | Описание |
|---|---|---|
| translate() | function | Сдвиг: `translate(10px, 20px)`, `translateY(-50%)`. |
| rotate() | function | Поворот: `rotate(45deg)`. |
| scale() | function | Масштаб: `scale(1.2)`. |
| skew() | function | Наклон: `skew(10deg)`. |
Примеры
Четыре основных преобразования:
<style>
div { display: inline-block; width: 70px; padding: 10px; margin: 16px; background: lightskyblue; }
</style>
<div style="transform: rotate(15deg);">rotate</div>
<div style="transform: scale(1.3);">scale</div>
<div style="transform: translate(10px, 10px);">translate</div>
<div style="transform: skew(-10deg);">skew</div>Несколько функций в одном значении применяются справа налево:
<div style="width: 120px; padding: 10px; background: gold; transform: translateX(20px) rotate(-5deg);">Two functions</div>Примечания
Преобразованный элемент сохраняет своё место в потоке — соседи не сдвигаются. Точку, вокруг которой элемент поворачивается и масштабируется, задаёт transform-origin (по умолчанию — центр). Для одной функции удобнее отдельные свойства translate, rotate и scale.
См. также
- translate, rotate, scale — Отдельные свойства для сдвига, поворота и масштаба — вместо функций в `transform`.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- animation — Запускает на элементе анимацию из `@keyframes`.
Вопросы и ответы по теме
В учебнике
- Трансформации — Свойство transform — сдвиг, поворот, масштаб и наклон элемента, точка опоры transform-origin и отдельные свойства translate, rotate, scale.