CSS переходы состояний transition, трансформации transform. Свойства translate, scale и rotate.

✏️ В этом уроке говорим про трансформации и переходы, свойства transform, translate, scale, skew, transform-origin, transition и другие.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:15​ | Свойство transform
▶ 00:32​ | Свойство transform, значение translate (смещение)
▶ 01:38​ | Свойство transform, значение scale (масштабирование)
▶ 03:09​ | Свойство transform, значение rotate (поворот)
▶ 03:53​ | Свойство transform, значение skew (искажение)
▶ 04:58​ | Новые свойства функций трансформаций: translate, scale и rotate
▶ 05:49​ | Свойство transform-origin
▶ 06:32​ | Свойство transition
▶ 09:36​ | Свойство transition-timing-function
▶ 10:32​ | Генератор cubic-bezier для transition-timing-function
▶ 10:56​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[pvytlde]

Спасибо за познавательный урок!)
С трансформацией можно поиграться делая логотипы для сайта. Да и в целом в некоторых вещах пригодится.

[svitboomer]

Кот на заднем плане огонь, как и ты 😺

[GunStm]

Комментарий для продвижения качественного образовательного контента, успехов.

[michaelkamko]

Не знал про новые отделтные свойства translate и другие.
Спасибо!)

[liza_beg]

Спасибо за ролик! Как всегда, все ёмко и понятно.

[hwcstey]

Коротко, но супер круто и понятно. Очень благодарна вам.

[m_mallk]

Дополню ещё:
Если допустим делаем выезжающую боковую панель, то изначальные позиции предположим у нас top: 0; left: 0, то есть левый верхний угол. Чтобы спрятать его из видимости, мы прописываем transform: translateX(-100%) (но учитывайте ещё что у вас будут тени, так что нужно делать например -120%, в общем на глаз сами смотрите). При нажатии на кнопку нужно чтобы панель открылась(т.е отобразилась), прописываем transform: translateX(0). И вот проблема в том, что при первом открытии/обновлении страницы, видна анимация перехода в закрытое состоянии, то есть уходит в левую часть чтобы спрятаться. В таком случае я в первом состоянии(то есть когда он должен быть скрыт) указал visibility: hidden, а во втором состоянии, когда он открывается при клике, visibility: visible.(никакие другие свойства например display: none или свойство прозрачности opacity не подходят, это я так, на всякий случай говорю). Теперь у нас не будет анимации перехода из одного состояния в другое при открытии/обновлении страницы.

[nfozjsl]

Пасиба Саня, все по теме и супер быстро

[yatutbylyatutbyl]

Спасибо за курс, все понятно и по делу. Лайк 👍

[meloibq]

Спасибо за ролик, всегда что-нибудь новенькое для себя узнаю. Сегодня, например, про отражение :)
Не знаю, когда оно мне понадобится, но выглядит прикольно.

И вот интересно кстати реальные примеры применения этих штук узнать. Я правильно поняла, что обычная практика использовать транслейт для выдвигания мобильного меню?

[kuparty]

Всё отлично, без воды, спасибо. Только хотел немного докопаться: вы говорите бейзер, а это Безье. Кривые Безье.

[m_mallk]

Хотелось бы узнать, как правильно прописывать свойства анимаций(минимальное требуемое время анимаций и т.п) для полноценной плавной работы без тормозов? И правильно я понимаю, что для обьектов, которые будем анимировать, внутри них нельзя делать много обьектов, иначе анимации в любом случае начнут тормозить, независимо от того, какие настройки для трансформации мы пропишем?

[ezoflin_home]

Насколько часто сейчас используют отдельный свойства translate, scale, rotate в реальной практике? Можно ли говорить о том, что их уже можно применять в любом проекте или лучше "обезопасить" себя и все же использовать transform?

[aLeKseU]

Ролик как всегда отличный и информативный! Правильно ли я понял, что на практике когда мы воздействуем на одиночный элемент, то разумнее использовать translate, чтобы его передвинуть в нужном направлении? А когда воздействуем на несколько элементов, то лучше использовать "флексы" или "гряды"?

[maxvell]

Будут ли в ближайшем будущем видео про JS?