CSS transform. 2D и 3D трансформации translate, scale, rotate и другие
HTML-код
- Опубликовано: 26 июл 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
когда на теплотрассе окажешся - тогда поймеш смысл
Я это обязательно пересмотрю и не раз ;)
Супер!
Респект Жень, даже на платных курсах мне о 3D не рассказали
Хех, ну просто их вел не я)
Я не любитель писать такого рода комментарии, но это самое лучшее объяснения материала!!! +100 like!!!!
Спасибо большое!
🔴 Как вам урок?
Содержание:
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 сделать так, чтобы при увеличении фото не теряло качество, никак не могу разобраться(((
Супер-пупер.)) Мега-класс.)
Женя, очень интересно! как и всегда. Подача на высоте! Спасибо за ссылку с материалами урока!
Спасибо и пожалуйста!
Я угадал что будут уроки по CSS 3D %))
Спасибо за такой урок %)
Пожалуйста!
Я как всегда с нетерпением жду выхода твоих роликов. Всегда что-то новое узнаю))Спасибо!
Пожалуйста!
Классно!! Твои уроки хочется смотреть все больше и больше. Жду не дождусь когда уроки по JS будут😄
Спасибо!
Спасибо за ваш труд! Желаю творческого успеха
Жека, тебе респект, благодарю за видос, ощущаю свою крутость, после просмотра твоих уроков.
Спасибо! Очень нужные материалы, нашла только у Вас. Очень интересно смотреть и слушать.
Я рад!
Круто! Полезные штуки! Не знал, что такое можно сделать просто на CSS. Спасибо!
Хотел сказать "Большущее спасибо" за этот курс!!! Это была самая крутая учеба, спасибо большое!
Пожалуйста! Но курс еще снимается!
Обычно успеваю поставить лайк раньше чем Жека о нем упоминает :)
Хех, спасибо!
Говорят лайк в начале ролика youtube не засчитывает. Поэтому лайк и в начале ролика и в конце ролика :) (с разных браузеров и аккаунтов)
Спасибо!
То есть, нужно нажимать дважды на лайк? А вы, сэр, подлец :)
@@alexanderlex-s933 почему? с разных браузеров и аккаунтов получается поставить 2 лайка.
Вначале ролика ставишь лайк в конце забираешь👍
Спасибо за видео, всё понятно и структурно. Особенно нравятся шпаргалки-очень удобные и эффективные
Я рад!
Шикарный урок, вся нужная информация в одном месте и с реальными примерами. Спасибо за такой годный материал!!))
Пожалуйста!
Это просто кайф! Подача офигенная! Спасибо Вам!
Я рад! Пожалуйста!
Жека, спасибо за видео! Видосы вышли на новый уровень, ты реально растешь) Удачи тебе в твоем деле и миллионов лайков от твоих подписчиков!👍👍👍
Супер! Второе видео смотрю и всё понятно, если бы не вы, не смогла бы наверное понять что делать
Все испробовал, очень полезно спасибо! Двигаемся дальше... 😉👍
👍Жека,просто шикарно!!!Спасибо!!!Очень доступно и понятно!!!👍
Я рад!
Здравствуйте! Благодарю Вас за видео!
Качество преподавания на высоте. Информация жуется как вкусняшка, подана в годном для восприятия виде. Ещё одно спасибо в твою копилку, Женя!
Пожалуйста! Я рад!
Как всегда на высшем уровне, без воды.
Спасибо!
Жека, ты просто СУПЕР! Все в одном...Гениальный подход, а главное, очень доходчиво. Большое спасибо!!!
Пожалуйста!
Урок просто супер! Столько инфы в одном видео 👍👍👍👍👍👍👍👍👍👍👍
Спасибо!
Контент просто чудовий. Роз'яснено все, що потрібно. Дякую
Евгений! ТЫ ГЕНИЙ! PERFECT! БРАВО! ЭТО НЕЧТО!
Дякую Женя, контент як завжди супер корисний, доступно і зрозуміло. По твоїх відео дуже легко і зручно вчитись.
спасибо.все очень круто и интересно.Продолжайте снимать такие крутые видео !
Спасибо за эту прекрасную подачу, так держать !
Це нереально круто. Затягує. Дуже дякую.
Как красиво у вас оформлены все видео!
Спасибо!
Cпасибо за хороший контент и отличную подачу)
Ну ты мощь дядя, всё понятно. Большое спасибо за твой труд
Столько крутых фишек !)) Крутяк)
Просто та доступно! Дякую ВАМ!
Задорно, информативно и в свободное время)! Супер
Пушка, просто пушка и очень интересно все рассказано и показано!
Спасибо!!! За огромный труд, очень приятная подача видео! С уважением к Вам Ахмад.
Как всегда на высоком уровне! Благодарю!!!
Пожалуйста!
Очень интересно! Спасибо!
Урок агонь, очень полезный!)
Повторюсь, многую инфу, узнал впервые)
Спасибо!
Супер! Спасибо, все очень понятно и просто объясняешь!
Спасибо!
Отличное видео! Спасибо за такие уроки!
Пожалуйста!
Просто Лучший! Спасибо большое!
Вогонь! крутий урок!
Чувак ты крут)))
Спасибо!
Дякую,за такі гарні,повчальні відео
Жека, отличный Учитель с большой буквы "У" ... огромное спасибо тебе за твой труд!
Я рад что полезно!
Спасибо за твои труды, живи а работай в свободное время,- осталось теперь это реализовать)))
Замечательны урок) И прекрасная подача) Уже бегу применять)
Супер!
Прикольно, сверстал свой первый сайт, подписался на твой канал и по твоими уроками, всё переделываю))), спасибо за очень полезную инфу!!!
Красава! Душевно благодарствую, особенно за системность!
Спасибо!
Крутая работа!
Как всегда отличный контент при полном отсутствии "воды"!
+100500 к карме!
Спасибо!
Спасибо за урок!
Ну... пользу от ваших видео не передать комментарием.
Так что, просто спасибо, за бесплатную, полезную информацию и за то, что тратите на это время.
Спасибо, отличный урок! 👍
Пожалуйста!
Как всегда на высоте, спасибо за знания, продолжай снимать 👍👍👍
Спасибо!
годнотааа ))) , очень люблю когда предупреждают об условия использования !!! а то потом не понимаешь почему не работает, а всего-навсего забил поставить свойство блок ..лайки-лайки
Спасибо!
Класс ! Спасибо!
Какие видео у тебя классные и по контенту и по оформлению, просто бомба! Лайк коммент и поехали:)
Отличный урок, смотрю, учyсь с огромным удовольствием.
Отличное объяснение по анимированию дивов в 3d. Именно это я и искал. Других аналогичных видосов на ютубе просто не нашёл.
И ещё немного магии от магистра тега и аттрибута) Отличный урок получился.
Спасибо!
Жека! Молодец! Без лишнего и максимально понятно! Всем бы учителям у тебя поучиться
Спасибо, стараюсь!
Спасибо большое за урок, я всем своим знакомым советую твой канал))
Спасибо большое!
спасибо тебе огромное за твои видео!!! ты меня очень спас
Очень полезный урок с наглядными примерами) Теперь думаю сделать для своего сайта выпадающее меню с карточками, которые будут вращаться при выпадении.
Круть!
Как всегда огонь! Спасибо!
Пожалуйста!
Жека, очень удачное расположение ты тут выбрал себе, маленькому. Сидишь и как будто смотришь вверх, прям на код, который видим мы. Непривычно, но мне кажется так более эффектно, чем раньше. Добавляет оригинальности твоим и так оригинальным роликам. Лайк.
Спасибо!
Дякую за твою працю! Чудово пояснюєш!
супер понятно! Это важно для меня! Спасибо
запустил видео- сразу лайк
Супер !!!
Спасибо тебе за то, что ты делаешь !
Спасибо большущее! Суперполезно и суперпонятно для новичков!
Фокусник Андриканич набирает обороты))👍🔥💥 Спасибо за видео!
Я очень благодарен Евгений тебе за твой очень понятный и качественный контент!
Пожалуйста!
Спасибо!!! Очень хороший урок!!!
огромное спасибо, очень помог. Good job
дякую за відео Женя
Класс, однозначный лайк. Так всё качественно сделал до всех мелочей, аж не поленился, и контент и подача. Сразу видно профессионал своего дела и задрот )))
Спасибо! Стараюсь что бы было наглядно
Спасибо Вам, Жека!!!
Спасибо, Жека!
Спасибо большое!
оо спасибо как всегда годнота
Спасибо тебе большое за знания, добрый ты человек!
Пожалуйста!
Супер!
Как всегда топ! Спасибо тебе!
Пожалуйста!
Женя как всегда - просто лучшее публикует, смотрим пока горяченькое!
Спасибо!
Огромное спасибо за ролик! Особенно за центрирование абсолютного объекта с неизвестными размерами!
пожалуйста!
@@FreelancerLifeStyle Мне первый раз ответил ютубер!
Очень хорошие уроки, спасибо!
Пожалуйста!
Очень позитивно)
Я рад!
Топ из топов ✊