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

👍 Файлы урока - [ Ссылка ]
🤟 Шпаргалка - [ Ссылка ]
👉 CSS transitions - [ Ссылка ]
👉 CSS animation и @keyframes - [ Ссылка ]

Содержание:
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

🔴 Получить доступ к плюшкам + поддержать канал: [ Ссылка ]
🔴 Telegram канал: [ Ссылка ] ([ Ссылка ])
🔴 Telegram чат по верстке: [ Ссылка ] ([ Ссылка ])
🔴 Facebook: [ Ссылка ]
🔴 Instagram: [ Ссылка ]

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

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

свернуть