• Теория
  • Теория

Иконка-трансформер, шаг 3

Отлично! Теперь с помощью трансформаций сместим и повернём короткие прямоугольники так, чтобы получилась стрелка.

Напоминаем, что к элементам или псевдоэлементам можно применить несколько трансформаций одновременно, для этого их нужно перечислить через пробел, например так:

.some-class::before {
  transform: translate(15px, 15px) rotate(90deg);
}

Порядок следования трансформации важен, так как при разном порядке могут получаться разные результаты.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Плавные переходы» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.