⚡ Кратко
Шпаргалка по функциям transform: translate — сдвиг, scale — масштаб, rotate — поворот, skew — наклон; для 3D — perspective и rotateX/Y/Z; точка опоры — transform-origin.
Справочник урока
| Инструмент | Зачем нужен | Мини-пример |
|---|
transform | Контейнер для операций трансформации | transform: translateY(-4px) scale(1.02); |
translate | Сдвиг элемента | transform: translate(1rem, -0.5rem); |
rotate | Поворот в 2D | transform: rotate(6deg); |
scale | Масштабирование | transform: scale(1.05); |
skew | Наклон | transform: skewX(-8deg); |
matrix | Матрица 2D-трансформации | transform: matrix(1, 0, 0, 1, 20, 0); |
perspective | Глубина 3D-сцены | perspective: 800px; |
rotateX/rotateY/rotateZ | Повороты по осям | transform: rotateY(12deg); |
transform-origin | Точка трансформации | transform-origin: left center; |