CSS transform. 2D и 3D трансформации translate, scale, rotate и другие

Этот урок посвящен 2D и 3D трансформациям, а именно замечательному CSS свойству transform. С помощью 2D и 3D трансформаций translate, scale, rotate и других мы сможем сдвигать, поворачивать, масштабировать элементы и делать многое другое! И сейчас я все тебе покажу. Итак, наш супергерой - это свойство transform с различными значениями. Объект трансформации должен понимать свойства блочных объектов. Так же важно знать что трансформируемые элементы никак не влияют на окружение. Ну и еще одно, трансформации можно анимировать, как с помощью свойства transition так и с помощью конструкции animation и keyframes.

👍 Файлы урока - https://fls.guru/files/tutorials/transform.zip
🤟 Шпаргалка - https://fls.guru/transform.html
👉 CSS transitions - https://www.youtube.com/watch?v=yZFg3cuq_LU&list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr&index=22
👉 CSS animation и @keyframes - https://www.youtube.com/watch?v=GKgOOuTL0po&list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr&index=23

Содержание:
00:00 - Вступление
00:33 - Свойство transform общее
02:17 - Функция translate
06:50 - Функция scale
09:25 - Функция rotate
10:50 - Функция skew
12:12 - Функция matrix
14:23 - Множественная 2D – трансформация
15:12 - Свойство transform-origin
16:40 - Свойства perspective \ perspective-origin
19:23 - Функция translate3D
20:45 - Функция scale3d
21:08 - Функция rotate3d
22:04 - Функция matrix3d
22:42 - Множественная 3D – трансформация
23:35 - Свойство transform-style
24:30 - Свойство backface-visibility

🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео CSS transform. 2D и 3D трансформации translate, scale, rotate и другие канала Фрілансер по життю