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/tran...
🤟 Шпаргалка - https://fls.guru/transform.html
👉 CSS transitions - • Все о CSS переходах (transitions) за 16 ми... 👉 CSS animation и @keyframes - • CSS animation и @keyframes за 12 минут. По... Содержание: 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 🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle 🔴 Telegram канал: https://t.me/freelancer_lifestyle
(https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat
(https://teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle 🔴 Instagram: / freelancer.lifestyle 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: / freelancerlifestyle 🤟 Живи, а работай в свободное время! ©
Смотрите также
