CSS transform. 2D и 3D трансформации translate, scale, rotate и другие
HTML-код
- Опубликовано: 9 июл 2024
- Этот урок посвящен 2D и 3D трансформациям, а именно замечательному CSS свойству transform. С помощью 2D и 3D трансформаций translate, scale, rotate и других мы сможем сдвигать, поворачивать, масштабировать элементы и делать многое другое! И сейчас я все тебе покажу. Итак, наш супергерой - это свойство transform с различными значениями. Объект трансформации должен понимать свойства блочных объектов. Так же важно знать что трансформируемые элементы никак не влияют на окружение. Ну и еще одно, трансформации можно анимировать, как с помощью свойства transition так и с помощью конструкции animation и keyframes.
👍 Файлы урока - fls.guru/files/tutorials/tran...
🤟 Шпаргалка - fls.guru/transform.html
👉 CSS transitions - • Все о CSS переходах (t...
👉 CSS animation и @keyframes - • CSS animation и @keyfr...
Содержание:
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 канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Очень приятная подача, ощущение словно с другом поговорил.
Супер! Я рад!
Соглашусь! У меня такое же ощущение))
Сто пудов!
Смотрю видео и неожиданно понимаю, что мне интересно не только от знаний, которые я получаю, но и от качественной подачи :). Спасибо за твой труд
Спасибо большое!
🔴 Как вам урок?
Содержание:
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
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Евгений подскажите как поменять иконку сворачивания кода, блока возле номера строки?
Не уверен что её можно менять
@@FreelancerLifeStyle ясно. а то раньше больше нравилось плюсик
Фрилансер по жизни - IT и фриланс отличный урок, подскажите пожалуйста как при свойстве scale сделать так, чтобы при увеличении фото не теряло качество, никак не могу разобраться(((
Супер-пупер.)) Мега-класс.)
В смысле как вам урок?! Да у тебя любой ролик можно просто сидеть и смотреть! Вот даже если ты не собираешься в эту тему влазить. Хоризма, подача материала- это что-то с чем-то.
Живи, а работай в свободное время!- а вот эту фразу я с первого видоса забрал себе в арсенал)
Супруге правда не нравится, когда я ее произношу)))))
Хех, спасибо!
Подача и системность то что нужно!
еще бы она ей нравилась
ты в идеале должен на 3х работах быть и желательно одновременно, чтобы общее количество часов было 24, но в сутках всего 24 часа и ты не успееш еще дома помыть посуду и вынести мусор
а вот если бы ты по 8 часов работал одновременно на 3х работах из дома, то мог бы все это успеть
@@kalobyte Смысл от того что вы написали ?
@@bl00dyJS
когда на теплотрассе окажешся - тогда поймеш смысл
Жека, тебе респект, благодарю за видос, ощущаю свою крутость, после просмотра твоих уроков.
Задорно, информативно и в свободное время)! Супер
Спасибо за ваш труд! Желаю творческого успеха
Я как всегда с нетерпением жду выхода твоих роликов. Всегда что-то новое узнаю))Спасибо!
Пожалуйста!
Вогонь! крутий урок!
Как всегда на высоте, спасибо за знания, продолжай снимать 👍👍👍
Спасибо!
Спасибо за эту прекрасную подачу, так держать !
Как всегда на высоком уровне! Благодарю!!!
Пожалуйста!
Жека, спасибо за видео! Видосы вышли на новый уровень, ты реально растешь) Удачи тебе в твоем деле и миллионов лайков от твоих подписчиков!👍👍👍
Ну... пользу от ваших видео не передать комментарием.
Так что, просто спасибо, за бесплатную, полезную информацию и за то, что тратите на это время.
Контент просто чудовий. Роз'яснено все, що потрібно. Дякую
Здравствуйте! Благодарю Вас за видео!
Пушка, просто пушка и очень интересно все рассказано и показано!
👍Жека,просто шикарно!!!Спасибо!!!Очень доступно и понятно!!!👍
Я рад!
Просто та доступно! Дякую ВАМ!
Ну ты мощь дядя, всё понятно. Большое спасибо за твой труд
Просто Лучший! Спасибо большое!
Круто! Полезные штуки! Не знал, что такое можно сделать просто на CSS. Спасибо!
Это просто кайф! Подача офигенная! Спасибо Вам!
Я рад! Пожалуйста!
Спасибо, отличный урок! 👍
Пожалуйста!
Женя, очень интересно! как и всегда. Подача на высоте! Спасибо за ссылку с материалами урока!
Спасибо и пожалуйста!
дякую за відео Женя
Очень интересно! Спасибо!
Столько крутых фишек !)) Крутяк)
Дякую,за такі гарні,повчальні відео
Отличное видео! Спасибо за такие уроки!
Пожалуйста!
Супер! Спасибо, все очень понятно и просто объясняешь!
Спасибо!
Це нереально круто. Затягує. Дуже дякую.
Евгений! ТЫ ГЕНИЙ! PERFECT! БРАВО! ЭТО НЕЧТО!
Спасибо большущее! Суперполезно и суперпонятно для новичков!
Красава! Душевно благодарствую, особенно за системность!
Спасибо!
Cпасибо за хороший контент и отличную подачу)
Дякую за твою працю! Чудово пояснюєш!
Как всегда огонь! Спасибо!
Пожалуйста!
Как всегда на высшем уровне, без воды.
Спасибо!
Урок просто супер! Столько инфы в одном видео 👍👍👍👍👍👍👍👍👍👍👍
Спасибо!
Все испробовал, очень полезно спасибо! Двигаемся дальше... 😉👍
спасибо.все очень круто и интересно.Продолжайте снимать такие крутые видео !
Спасибо тебе большое за знания, добрый ты человек!
Пожалуйста!
годнотааа ))) , очень люблю когда предупреждают об условия использования !!! а то потом не понимаешь почему не работает, а всего-навсего забил поставить свойство блок ..лайки-лайки
Спасибо!
Спасибо! Очень нужные материалы, нашла только у Вас. Очень интересно смотреть и слушать.
Я рад!
Спасибо!!! За огромный труд, очень приятная подача видео! С уважением к Вам Ахмад.
Какие видео у тебя классные и по контенту и по оформлению, просто бомба! Лайк коммент и поехали:)
Урок агонь, очень полезный!)
Повторюсь, многую инфу, узнал впервые)
Спасибо!
Спасибо за урок!
Замечательны урок) И прекрасная подача) Уже бегу применять)
Супер!
Классно!! Твои уроки хочется смотреть все больше и больше. Жду не дождусь когда уроки по JS будут😄
Спасибо!
Дякую Женя, контент як завжди супер корисний, доступно і зрозуміло. По твоїх відео дуже легко і зручно вчитись.
Крутая работа!
Как красиво у вас оформлены все видео!
Спасибо!
Дуже сподобався урок!
Спасибо за видео, всё понятно и структурно. Особенно нравятся шпаргалки-очень удобные и эффективные
Я рад!
супер понятно! Это важно для меня! Спасибо
Я угадал что будут уроки по CSS 3D %))
Спасибо за такой урок %)
Пожалуйста!
Хотел сказать "Большущее спасибо" за этот курс!!! Это была самая крутая учеба, спасибо большое!
Пожалуйста! Но курс еще снимается!
Как всегда топ! Спасибо тебе!
Пожалуйста!
Отличный урок, смотрю, учyсь с огромным удовольствием.
спасибо тебе огромное за твои видео!!! ты меня очень спас
Спасибо тебе за то, что ты делаешь !
Шикарный урок, вся нужная информация в одном месте и с реальными примерами. Спасибо за такой годный материал!!))
Пожалуйста!
Качество преподавания на высоте. Информация жуется как вкусняшка, подана в годном для восприятия виде. Ещё одно спасибо в твою копилку, Женя!
Пожалуйста! Я рад!
запустил видео- сразу лайк
Класс ! Спасибо!
Я это обязательно пересмотрю и не раз ;)
Супер!
Жека, ты просто СУПЕР! Все в одном...Гениальный подход, а главное, очень доходчиво. Большое спасибо!!!
Пожалуйста!
Спасибо большое за урок, я всем своим знакомым советую твой канал))
Спасибо большое!
Я очень благодарен Евгений тебе за твой очень понятный и качественный контент!
Пожалуйста!
Супер !!!
Жека, Вы лучший! крутое объяснение важных и нужных тем! Спасибо!
Фокусник Андриканич набирает обороты))👍🔥💥 Спасибо за видео!
Спасибо Вам, Жека!!!
храни тебя боженька. Ты - лучший
огромное спасибо, очень помог. Good job
Очень позитивно)
Я рад!
Прикольно, сверстал свой первый сайт, подписался на твой канал и по твоими уроками, всё переделываю))), спасибо за очень полезную инфу!!!
Очень хорошие уроки, спасибо!
Пожалуйста!
Спасибо!!! Очень хороший урок!!!
Спасибо за твои труды, живи а работай в свободное время,- осталось теперь это реализовать)))
Как всегда отличный контент при полном отсутствии "воды"!
+100500 к карме!
Спасибо!
Это очень годно! Спасибо тебе!!
Пожалуйста!
Это мега круто!!!Спасибо)
Пожалуйста!
Круто! Спасибо большое!
Пожалуйста!
Спасибо тебе огромное за то, что ты делаешь
Пожалуйста!
Женя как всегда - просто лучшее публикует, смотрим пока горяченькое!
Спасибо!
Супер! Второе видео смотрю и всё понятно, если бы не вы, не смогла бы наверное понять что делать
оо спасибо как всегда годнота
Жека! Молодец! Без лишнего и максимально понятно! Всем бы учителям у тебя поучиться
Спасибо, стараюсь!
жирный лайк, без вопросов!
Спасибо!
Спасибо, Жека!
Крутое видео, полезная инфо. Спасибо!
Пожалуйста!
Очень крутое видео))) супер)
Супер!
Просто кращий) Дуже пізнавальний канал👍👍
Дякую!
Это шикарнейший канал!!!
Спасибо!
Большое спасибо!
Пожалуйста!
Жека дуже дякую тобі за твою працю, розклав на молекули (чітко, легко, корисно і просто)