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

1. Сдвиг без влияния на поток

Второй блок сдвинут, первый стоит на месте — transform не трогает раскладку.

.b { transform: translate(30px, 0); }

2. Масштаб на hover

Наведи курсор на кнопку — она плавно увеличится за счёт scale и transition.

.btn {
  transition: transform 150ms ease;
}
.btn:hover {
  transform: scale(1.1);
}

3. Повёрнутый бейдж

.badge { transform: rotate(-12deg); }

4. Точка опоры

Одинаковый rotate(25deg), разные origin: при top left блок поворачивается вокруг своего угла и «уезжает» вправо-вниз, при center — крутится на месте.

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

5. 3D-карточка

perspective: 700px на контейнере + rotateY(30deg) на карточке — правый край уходит вглубь.

.scene { perspective: 700px; }
.card  { transform: rotateY(30deg); }