CSS transform. 2D и 3D трансформации translate, scale, rotate и другие
ฝัง
- เผยแพร่เมื่อ 15 มิ.ย. 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
🤟 Живи, а работай в свободное время! ©
Очень приятная подача, ощущение словно с другом поговорил.
Супер! Я рад!
Соглашусь! У меня такое же ощущение))
Сто пудов!
Смотрю видео и неожиданно понимаю, что мне интересно не только от знаний, которые я получаю, но и от качественной подачи :). Спасибо за твой труд
Спасибо большое!
В смысле как вам урок?! Да у тебя любой ролик можно просто сидеть и смотреть! Вот даже если ты не собираешься в эту тему влазить. Хоризма, подача материала- это что-то с чем-то.
Живи, а работай в свободное время!- а вот эту фразу я с первого видоса забрал себе в арсенал)
Супруге правда не нравится, когда я ее произношу)))))
Хех, спасибо!
Подача и системность то что нужно!
еще бы она ей нравилась
ты в идеале должен на 3х работах быть и желательно одновременно, чтобы общее количество часов было 24, но в сутках всего 24 часа и ты не успееш еще дома помыть посуду и вынести мусор
а вот если бы ты по 8 часов работал одновременно на 3х работах из дома, то мог бы все это успеть
@@kalobyte Смысл от того что вы написали ?
@@bl00dyJS
когда на теплотрассе окажешся - тогда поймеш смысл
🔴 Как вам урок?
Содержание:
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 сделать так, чтобы при увеличении фото не теряло качество, никак не могу разобраться(((
Супер-пупер.)) Мега-класс.)
Жека, ти дуже крутий препод-блогер! Лаконічно, доступно, теорія-практика, подача та харизма, просто топ! Твої матеріали- це скарб! Короче, дуже дякую!
Я не любитель писать такого рода комментарии, но это самое лучшее объяснения материала!!! +100 like!!!!
Спасибо большое!
Респект Жень, даже на платных курсах мне о 3D не рассказали
Хех, ну просто их вел не я)
Обычно успеваю поставить лайк раньше чем Жека о нем упоминает :)
Хех, спасибо!
Досмотрел до конца весь курс.
Сразу хочу отметить что все ваши видео именно то что нужно. Видел курсы где мало информации где говорят сделай так и будет счастье но если тебе нужно по другому то ищи сам. Либо очень много информации где ничего не объясняют. У вас же золотая середина! Нет слов. Спасибо большое!
Если вдруг надумаете приехать в Грецию в Афины на отдых то буду рад показать вам город.
Удачи вам во всех ваших начинаниях!
Большое спасибо за уроки, Евгений. Очень нравится ваша "легкая" подача материала, без снобизма
Как же приятно, что есть такие люди как вы! Очень подробно объясняете)))
Отличный урок, замечательное объяснение. Всё ёмко и добросовестно! Чувствуется, что вы трудитесь! Это лучшее, что я видел на TH-cam. Спасибо вам!!!!
Я угадал что будут уроки по CSS 3D %))
Спасибо за такой урок %)
Пожалуйста!
Заметили, что на полосе прокрутки ролика сделал Жека? Описание, о чем идет речь в это время!!! Это мега полезная вещь.
Да, это круть!
Контент просто чудовий. Роз'яснено все, що потрібно. Дякую
Я это обязательно пересмотрю и не раз ;)
Супер!
Спасибо. Без этих уроков вообще не разобрался бы
великолепная подача, очень конструктивно! в 27 минут уложил вагон инфы! просматривать буду еще множество раз!) Спасибо)
Качество преподавания на высоте. Информация жуется как вкусняшка, подана в годном для восприятия виде. Ещё одно спасибо в твою копилку, Женя!
Пожалуйста! Я рад!
Огромное спасибо вам. Я недавно начал заниматься WEB программированием и однозначно могу сказать, что вы меня очень помогли. Удобное и понятное обучения без всякого хлама 👌👍👍👍
Магия, да и только! Огромное спасибо за урок!
Как здорово, что есть такие люди
Евгений огромное спасибо за уроки! Информативность, подача, доступность, это просто Вау, нет слов! За твой труд ты заслуживаешь большого успеха!
Спасибо!
Сложно, но интересно :). Действительно нужно плейлист с набором штук, которые можно при помощи этого всего сделать. Спасибо Женя!
годнотааа ))) , очень люблю когда предупреждают об условия использования !!! а то потом не понимаешь почему не работает, а всего-навсего забил поставить свойство блок ..лайки-лайки
Спасибо!
Спасибо тебе большое очень полезные уроки, я новичок работаю недавно каждую неделю пересматриваю твои уроки, то один то другой, ты просто супер.
Бомбезний Туторіал від Справжнього Віртуоза... Величезне Вам Людське Спасибі !!!
Я как всегда с нетерпением жду выхода твоих роликов. Всегда что-то новое узнаю))Спасибо!
Пожалуйста!
Женя, очень интересно! как и всегда. Подача на высоте! Спасибо за ссылку с материалами урока!
Спасибо и пожалуйста!
Шикарный урок, вся нужная информация в одном месте и с реальными примерами. Спасибо за такой годный материал!!))
Пожалуйста!
Как всегда на высшем уровне, без воды.
Спасибо!
Жека, отличный Учитель с большой буквы "У" ... огромное спасибо тебе за твой труд!
Я рад что полезно!
Хотел сказать "Большущее спасибо" за этот курс!!! Это была самая крутая учеба, спасибо большое!
Пожалуйста! Но курс еще снимается!
Евгений! ТЫ ГЕНИЙ! PERFECT! БРАВО! ЭТО НЕЧТО!
Ну... пользу от ваших видео не передать комментарием.
Так что, просто спасибо, за бесплатную, полезную информацию и за то, что тратите на это время.
Классно!! Твои уроки хочется смотреть все больше и больше. Жду не дождусь когда уроки по JS будут😄
Спасибо!
Это просто кайф! Подача офигенная! Спасибо Вам!
Я рад! Пожалуйста!
Спасибо! Очень нужные материалы, нашла только у Вас. Очень интересно смотреть и слушать.
Я рад!
Дякую,за такі гарні,повчальні відео
Дякую Женя, контент як завжди супер корисний, доступно і зрозуміло. По твоїх відео дуже легко і зручно вчитись.
Урок просто супер! Столько инфы в одном видео 👍👍👍👍👍👍👍👍👍👍👍
Спасибо!
👍Жека,просто шикарно!!!Спасибо!!!Очень доступно и понятно!!!👍
Я рад!
Спасибо за видео, всё понятно и структурно. Особенно нравятся шпаргалки-очень удобные и эффективные
Я рад!
Спасибо за ваш труд! Желаю творческого успеха
Супер! Второе видео смотрю и всё понятно, если бы не вы, не смогла бы наверное понять что делать
Жека, ты просто СУПЕР! Все в одном...Гениальный подход, а главное, очень доходчиво. Большое спасибо!!!
Пожалуйста!
запустил видео- сразу лайк
Аааа, Женя, спасибо! Почти все что я знаю о front-end я научился у тебя. Когда-нибудь похвастаюсь своими успехами)
Просто та доступно! Дякую ВАМ!
спасибо.все очень круто и интересно.Продолжайте снимать такие крутые видео !
Женя как всегда - просто лучшее публикует, смотрим пока горяченькое!
Спасибо!
Круто! Полезные штуки! Не знал, что такое можно сделать просто на CSS. Спасибо!
Как красиво у вас оформлены все видео!
Спасибо!
Как всегда на высоком уровне! Благодарю!!!
Пожалуйста!
Жека, тебе респект, благодарю за видос, ощущаю свою крутость, после просмотра твоих уроков.
Отличное видео! Спасибо за такие уроки!
Пожалуйста!
И ещё немного магии от магистра тега и аттрибута) Отличный урок получился.
Спасибо!
Спасибо за эту прекрасную подачу, так держать !
Супер! Спасибо, все очень понятно и просто объясняешь!
Спасибо!
Здравствуйте! Благодарю Вас за видео!
Це нереально круто. Затягує. Дуже дякую.
Говорят лайк в начале ролика youtube не засчитывает. Поэтому лайк и в начале ролика и в конце ролика :) (с разных браузеров и аккаунтов)
Спасибо!
То есть, нужно нажимать дважды на лайк? А вы, сэр, подлец :)
@@alexanderlex-s933 почему? с разных браузеров и аккаунтов получается поставить 2 лайка.
Вначале ролика ставишь лайк в конце забираешь👍
Ну ты мощь дядя, всё понятно. Большое спасибо за твой труд
Спасибо, отличный урок! 👍
Пожалуйста!
Задорно, информативно и в свободное время)! Супер
Чувак ты крут)))
Спасибо!
Жека, спасибо за видео! Видосы вышли на новый уровень, ты реально растешь) Удачи тебе в твоем деле и миллионов лайков от твоих подписчиков!👍👍👍
Как всегда на высоте, спасибо за знания, продолжай снимать 👍👍👍
Спасибо!
Красава! Душевно благодарствую, особенно за системность!
Спасибо!
Все испробовал, очень полезно спасибо! Двигаемся дальше... 😉👍
Пушка, просто пушка и очень интересно все рассказано и показано!
Очень полезный урок с наглядными примерами) Теперь думаю сделать для своего сайта выпадающее меню с карточками, которые будут вращаться при выпадении.
Круть!
Урок агонь, очень полезный!)
Повторюсь, многую инфу, узнал впервые)
Спасибо!
Просто Лучший! Спасибо большое!
Спасибо!!! За огромный труд, очень приятная подача видео! С уважением к Вам Ахмад.
Спасибо тебе большое за знания, добрый ты человек!
Пожалуйста!
Спасибо большущее! Суперполезно и суперпонятно для новичков!
Такая сложна информация к восприятию и такая простая подача... Самостоятельно точно бы не разобралась во всех этих свойствах... Но сейчас у меня просто нет выбора))))))) Спасибо за материал!)
Фокусник Андриканич набирает обороты))👍🔥💥 Спасибо за видео!
Cпасибо за хороший контент и отличную подачу)
Жека, очень удачное расположение ты тут выбрал себе, маленькому. Сидишь и как будто смотришь вверх, прям на код, который видим мы. Непривычно, но мне кажется так более эффектно, чем раньше. Добавляет оригинальности твоим и так оригинальным роликам. Лайк.
Спасибо!
Как всегда отличный контент при полном отсутствии "воды"!
+100500 к карме!
Спасибо!
Замечательны урок) И прекрасная подача) Уже бегу применять)
Супер!
Жека! Молодец! Без лишнего и максимально понятно! Всем бы учителям у тебя поучиться
Спасибо, стараюсь!
храни тебя боженька. Ты - лучший
Спасибо большое за урок, я всем своим знакомым советую твой канал))
Спасибо большое!
Спасибо тебе за то, что ты делаешь !
Очень интересно! Спасибо!
супер понятно! Это важно для меня! Спасибо
Спасибо за твои труды, живи а работай в свободное время,- осталось теперь это реализовать)))
Бро, в бескрайнем ютубе я наконец нашёл тебя! Лучший канал
Очень хорошие уроки, спасибо!
Пожалуйста!
спасибо тебе огромное за твои видео!!! ты меня очень спас
Столько крутых фишек !)) Крутяк)
Как всегда огонь! Спасибо!
Пожалуйста!
Спасибо за урок!
Отличный урок, смотрю, учyсь с огромным удовольствием.
Дякую за твою працю! Чудово пояснюєш!
Прикольно, сверстал свой первый сайт, подписался на твой канал и по твоими уроками, всё переделываю))), спасибо за очень полезную инфу!!!
Спасибо тебе огромное за то, что ты делаешь
Пожалуйста!