Урок 43. Примеры: Трансформации: transform, 2D/3D

В каждом примере цветной блок — это результат transform. Где уместно, пунктирная рамка показывает исходное место, которое элемент всё ещё занимает в потоке.

1. translate — сдвиг

translate(20px, 10px) двигает блок вправо и вниз. Пунктир — исходное место.

.box {
  transform: translate(20px, 10px);
}

2. scale — масштаб

scale(1.2) увеличивает блок на 20% от центра — он наезжает на пунктирную исходную область.

.box {
  transform: scale(1.2);
}

3. rotate — поворот

rotate(15deg) поворачивает блок по часовой стрелке вокруг центра.

.box {
  transform: rotate(15deg);
}

4. skew — наклон

skewX(10deg) скашивает грани — прямоугольник становится параллелограммом.

.box {
  transform: skewX(10deg);
}

5. transform-origin — точка опоры

Один и тот же rotate(20deg), но разные точки опоры: слева — центр (по умолчанию), справа — левый верхний угол. Origin меняет, куда «уезжает» элемент.

.a { transform: rotate(20deg); transform-origin: center; }
.b { transform: rotate(20deg); transform-origin: top left; }

6. 3D: perspective + rotateY

Родителю задана perspective: 600px, карточке — rotateY(35deg). Правый край уходит в глубину — реальный 3D-наклон, видимый статично.

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }