CSS transform. 2D и 3D трансформации translate, scale, rotate и другие

Поділитися
Вставка
  • Опубліковано 20 гру 2024

КОМЕНТАРІ • 476

  • @thebaglay123
    @thebaglay123 4 роки тому +173

    Очень приятная подача, ощущение словно с другом поговорил.

  • @TemZali
    @TemZali 4 роки тому +55

    Смотрю видео и неожиданно понимаю, что мне интересно не только от знаний, которые я получаю, но и от качественной подачи :). Спасибо за твой труд

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  4 роки тому +129

    🔴 Как вам урок?
    Содержание:
    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/

    • @mihail4971
      @mihail4971 4 роки тому

      Евгений подскажите как поменять иконку сворачивания кода, блока возле номера строки?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Не уверен что её можно менять

    • @mihail4971
      @mihail4971 4 роки тому

      @@FreelancerLifeStyle ясно. а то раньше больше нравилось плюсик

    • @КсенияГалиева-з2п
      @КсенияГалиева-з2п 4 роки тому

      Фрилансер по жизни - IT и фриланс отличный урок, подскажите пожалуйста как при свойстве scale сделать так, чтобы при увеличении фото не теряло качество, никак не могу разобраться(((

    • @truenight4511
      @truenight4511 4 роки тому

      Супер-пупер.)) Мега-класс.)

  • @oleksandrzagorodnii1087
    @oleksandrzagorodnii1087 4 роки тому +19

    Я не любитель писать такого рода комментарии, но это самое лучшее объяснения материала!!! +100 like!!!!

  • @yuriismakota9574
    @yuriismakota9574 4 роки тому +3

    Жека, отличный Учитель с большой буквы "У" ... огромное спасибо тебе за твой труд!

  • @OlhaKumanowska
    @OlhaKumanowska 4 роки тому

    годнотааа ))) , очень люблю когда предупреждают об условия использования !!! а то потом не понимаешь почему не работает, а всего-навсего забил поставить свойство блок ..лайки-лайки

  • @jasonborn4373
    @jasonborn4373 2 роки тому +1

    Евгений! ТЫ ГЕНИЙ! PERFECT! БРАВО! ЭТО НЕЧТО!

  • @Timyr48
    @Timyr48 Рік тому +6

    Жека, ти дуже крутий препод-блогер! Лаконічно, доступно, теорія-практика, подача та харизма, просто топ! Твої матеріали- це скарб! Короче, дуже дякую!

  • @x0mek638
    @x0mek638 4 роки тому

    Ну... пользу от ваших видео не передать комментарием.
    Так что, просто спасибо, за бесплатную, полезную информацию и за то, что тратите на это время.

  • @СамуилАнтонович

    rotate(540deg) scale(-1) така кайфова анімація виходить в одну строчку
    дякую за навчання, дуже кайфово

  • @Sembiod
    @Sembiod 4 роки тому +10

    Я угадал что будут уроки по CSS 3D %))
    Спасибо за такой урок %)

  • @al77ex1
    @al77ex1 4 роки тому +7

    Говорят лайк в начале ролика youtube не засчитывает. Поэтому лайк и в начале ролика и в конце ролика :) (с разных браузеров и аккаунтов)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Спасибо!

    • @alexanderlex-s933
      @alexanderlex-s933 4 роки тому +1

      То есть, нужно нажимать дважды на лайк? А вы, сэр, подлец :)

    • @al77ex1
      @al77ex1 4 роки тому

      @@alexanderlex-s933 почему? с разных браузеров и аккаунтов получается поставить 2 лайка.

    • @iamname8758
      @iamname8758 4 роки тому

      Вначале ролика ставишь лайк в конце забираешь👍

  • @webdevelopment5337
    @webdevelopment5337 4 роки тому +22

    Респект Жень, даже на платных курсах мне о 3D не рассказали

  • @andrispikarevskis5513
    @andrispikarevskis5513 4 роки тому +17

    Я это обязательно пересмотрю и не раз ;)

  • @АлександрПавловичВоронцов

    Качество преподавания на высоте. Информация жуется как вкусняшка, подана в годном для восприятия виде. Ещё одно спасибо в твою копилку, Женя!

  • @svhanz
    @svhanz 4 роки тому +95

    В смысле как вам урок?! Да у тебя любой ролик можно просто сидеть и смотреть! Вот даже если ты не собираешься в эту тему влазить. Хоризма, подача материала- это что-то с чем-то.
    Живи, а работай в свободное время!- а вот эту фразу я с первого видоса забрал себе в арсенал)
    Супруге правда не нравится, когда я ее произношу)))))

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +6

      Хех, спасибо!

    • @empatij1730
      @empatij1730 4 роки тому +1

      Подача и системность то что нужно!

    • @kalobyte
      @kalobyte 4 роки тому +5

      еще бы она ей нравилась
      ты в идеале должен на 3х работах быть и желательно одновременно, чтобы общее количество часов было 24, но в сутках всего 24 часа и ты не успееш еще дома помыть посуду и вынести мусор
      а вот если бы ты по 8 часов работал одновременно на 3х работах из дома, то мог бы все это успеть

    • @bl00dyJS
      @bl00dyJS 2 роки тому +1

      @@kalobyte Смысл от того что вы написали ?

    • @kalobyte
      @kalobyte 2 роки тому

      @@bl00dyJS
      когда на теплотрассе окажешся - тогда поймеш смысл

  • @VitaliiMaevskii
    @VitaliiMaevskii 4 роки тому +1

    Шикарный урок, вся нужная информация в одном месте и с реальными примерами. Спасибо за такой годный материал!!))

  • @AlinaEmv
    @AlinaEmv 2 роки тому

    Такая сложна информация к восприятию и такая простая подача... Самостоятельно точно бы не разобралась во всех этих свойствах... Но сейчас у меня просто нет выбора))))))) Спасибо за материал!)

  • @Sojer90
    @Sojer90 3 роки тому

    Дякую Женя, контент як завжди супер корисний, доступно і зрозуміло. По твоїх відео дуже легко і зручно вчитись.

  • @АнтонКамаргин-ъ6ъ
    @АнтонКамаргин-ъ6ъ 4 роки тому +1

    Хотел сказать "Большущее спасибо" за этот курс!!! Это была самая крутая учеба, спасибо большое!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +1

      Пожалуйста! Но курс еще снимается!

  • @accuso
    @accuso 3 роки тому

    Контент просто чудовий. Роз'яснено все, що потрібно. Дякую

  • @ВсеволодПатимейкер

    Очень полезный урок с наглядными примерами) Теперь думаю сделать для своего сайта выпадающее меню с карточками, которые будут вращаться при выпадении.

  • @UrumovKonstantin
    @UrumovKonstantin 4 роки тому +1

    Как всегда отличный контент при полном отсутствии "воды"!
    +100500 к карме!

  • @Ervin-m8v
    @Ervin-m8v 7 місяців тому +4

    Никогда не думал, что Месси меня будет обучать программированию…

  • @andeveloper
    @andeveloper 2 роки тому +1

    запустил видео- сразу лайк

  • @useruseroff6605
    @useruseroff6605 4 роки тому +3

    Как всегда на высшем уровне, без воды.

  • @arturdauzvardas3112
    @arturdauzvardas3112 3 роки тому +1

    Жека, ты просто СУПЕР! Все в одном...Гениальный подход, а главное, очень доходчиво. Большое спасибо!!!

  • @Rinxpwr7
    @Rinxpwr7 3 роки тому

    Супер! Второе видео смотрю и всё понятно, если бы не вы, не смогла бы наверное понять что делать

  • @fayu7752
    @fayu7752 4 роки тому +1

    Класс, однозначный лайк. Так всё качественно сделал до всех мелочей, аж не поленился, и контент и подача. Сразу видно профессионал своего дела и задрот )))

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Спасибо! Стараюсь что бы было наглядно

  • @arsenmik2975
    @arsenmik2975 4 роки тому +2

    Жека, очень удачное расположение ты тут выбрал себе, маленькому. Сидишь и как будто смотришь вверх, прям на код, который видим мы. Непривычно, но мне кажется так более эффектно, чем раньше. Добавляет оригинальности твоим и так оригинальным роликам. Лайк.

  • @гоблинвася-п7о
    @гоблинвася-п7о 4 роки тому +2

    И ещё немного магии от магистра тега и аттрибута) Отличный урок получился.

  • @АндрейМатюхин-ь4с
    @АндрейМатюхин-ь4с 4 роки тому +1

    Я как всегда с нетерпением жду выхода твоих роликов. Всегда что-то новое узнаю))Спасибо!

  • @VasiliyKolpaxidis
    @VasiliyKolpaxidis 4 роки тому +3

    Досмотрел до конца весь курс.
    Сразу хочу отметить что все ваши видео именно то что нужно. Видел курсы где мало информации где говорят сделай так и будет счастье но если тебе нужно по другому то ищи сам. Либо очень много информации где ничего не объясняют. У вас же золотая середина! Нет слов. Спасибо большое!
    Если вдруг надумаете приехать в Грецию в Афины на отдых то буду рад показать вам город.
    Удачи вам во всех ваших начинаниях!

  • @АртТ-м7т
    @АртТ-м7т 3 роки тому +1

    Огромное спасибо за ролик! Особенно за центрирование абсолютного объекта с неизвестными размерами!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому +1

      пожалуйста!

    • @АртТ-м7т
      @АртТ-м7т 3 роки тому

      @@FreelancerLifeStyle Мне первый раз ответил ютубер!

  • @variagc1232
    @variagc1232 4 роки тому +1

    Жека! Молодец! Без лишнего и максимально понятно! Всем бы учителям у тебя поучиться

  • @Crypto_mammy
    @Crypto_mammy 4 роки тому +2

    Как красиво у вас оформлены все видео!

  • @bl00dyJS
    @bl00dyJS 2 роки тому

    Да , я не понимаю как автор так обьясняет и еще как ему получается так много тратить времени на качественный контент , да вот я сижу , изучаю , видео то долгое , и начинает уже голова болеть немного , но я все равно досматриваю это великолепие

  • @TheChaluy
    @TheChaluy 4 роки тому +12

    Обычно успеваю поставить лайк раньше чем Жека о нем упоминает :)

  • @Алла-н5г
    @Алла-н5г 3 роки тому +1

    Фокусник Андриканич набирает обороты))👍🔥💥 Спасибо за видео!

  • @Alexander-mh7hy
    @Alexander-mh7hy 4 роки тому +1

    Спасибо за видео, всё понятно и структурно. Особенно нравятся шпаргалки-очень удобные и эффективные

  • @akhmad_goytinski
    @akhmad_goytinski 2 роки тому

    Спасибо!!! За огромный труд, очень приятная подача видео! С уважением к Вам Ахмад.

  • @АнтонКотов-п9э
    @АнтонКотов-п9э 4 роки тому

    Круто! Полезные штуки! Не знал, что такое можно сделать просто на CSS. Спасибо!

  • @annagrigorewa
    @annagrigorewa 4 роки тому +1

    Женя, очень интересно! как и всегда. Подача на высоте! Спасибо за ссылку с материалами урока!

  • @roma4806
    @roma4806 4 роки тому +3

    Просто кращий) Дуже пізнавальний канал👍👍

  • @FradPR
    @FradPR Рік тому +1

    Дякую,за такі гарні,повчальні відео

  • @elis_elsever2349
    @elis_elsever2349 2 роки тому +1

    Ну ты мощь дядя, всё понятно. Большое спасибо за твой труд

  • @ИванПетров-б9д5з
    @ИванПетров-б9д5з 4 роки тому +3

    Жека, ты когда рассказываешь - в определенные моменты светишься от счастья. Видно, что тебе это очень нравится. И не надоело за столько лет. Редкий случай когда работа приятна и полезна. Молодчик..))

  • @КонстантинЛукьянов-ю1ж

    Спасибо большое за урок, я всем своим знакомым советую твой канал))

  • @Тороид
    @Тороид Рік тому

    Отличное объяснение по анимированию дивов в 3d. Именно это я и искал. Других аналогичных видосов на ютубе просто не нашёл.

  • @arikgevorgyan809
    @arikgevorgyan809 4 роки тому +6

    Классно!! Твои уроки хочется смотреть все больше и больше. Жду не дождусь когда уроки по JS будут😄

  • @ВіталійЛівадний-е4э

    Це нереально круто. Затягує. Дуже дякую.

  • @progprog796
    @progprog796 4 роки тому

    Спасибо за твои труды, живи а работай в свободное время,- осталось теперь это реализовать)))

  • @empatij1730
    @empatij1730 4 роки тому +2

    Красава! Душевно благодарствую, особенно за системность!

  • @ЕленаКозлова-э1ж
    @ЕленаКозлова-э1ж 3 роки тому +1

    Спасибо! Очень нужные материалы, нашла только у Вас. Очень интересно смотреть и слушать.

  • @programmeruz9714
    @programmeruz9714 3 роки тому

    Спасибо вам Жека огромное, я самостоятельно научился верстать с помощью ваших. Салам из Узбекистана!!!

    • @sergmalin210
      @sergmalin210 3 роки тому

      Привет, сколько времени тебе понадобилось что-бы научиться верстать, хватило тебе информации, которую дает Жека? На что дополнительно обратить внимание?

    • @programmeruz9714
      @programmeruz9714 3 роки тому +1

      @@sergmalin210 здравствуйте, где-то 2 недельки. Но ещё другие видео смотрел, но видео уроки Жеки один из лучших. Советую изучить Sass less

    • @sergmalin210
      @sergmalin210 3 роки тому

      Значит у тебя уже была сильная база. Я Учусь с 0.

    • @programmeruz9714
      @programmeruz9714 3 роки тому +1

      @@sergmalin210 нет, я же начал с нуля как и вы. Просто надо сфокусироваться на нем, 1 день для изучения Html Css, а потом только практика. На HTML Css много чего можно сделать

  • @parahumanoid
    @parahumanoid 2 роки тому +1

    Также к сведению слушателей курса: помимо deg доступны единицы измерения углового поворота rad, grad, turn. Для простых житейских вопросов капец как удобен turn. Гуглим по желанию.

  • @Lafayette477
    @Lafayette477 4 роки тому +1

    Урок просто супер! Столько инфы в одном видео 👍👍👍👍👍👍👍👍👍👍👍

  • @AureliaAurita-lp1eq
    @AureliaAurita-lp1eq 3 роки тому

    храни тебя боженька. Ты - лучший

  • @pavelyurchenko3015
    @pavelyurchenko3015 4 роки тому +1

    Это просто кайф! Подача офигенная! Спасибо Вам!

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 4 роки тому +2

    Урок агонь, очень полезный!)
    Повторюсь, многую инфу, узнал впервые)

  • @anthonykuznetsov6623
    @anthonykuznetsov6623 4 роки тому

    Ты причиняешь добро людям, Женя - одумайся, оно же тебе вернется бумерангом!

  • @МихаилПарамонов-з6ч

    Жека, тебе респект, благодарю за видос, ощущаю свою крутость, после просмотра твоих уроков.

  • @Tiikiirus
    @Tiikiirus 4 роки тому

    Женя как всегда - просто лучшее публикует, смотрим пока горяченькое!

  • @alexandr6055
    @alexandr6055 2 роки тому +4

    Ты нереально крутой! Надо учить по мимо кода ещё и украинский язык, чтоб продолжать смотреть твои ролики.

  • @TheSeVeG
    @TheSeVeG 4 роки тому +2

    Супер! Спасибо, все очень понятно и просто объясняешь!

  • @parahumanoid
    @parahumanoid 2 роки тому +1

    0:50 - По спецификации div по умолчанию ни фига не блочный: по умолчанию display: inline (как и ВСЕ остальные элементы), к чему и приводит использование display: initial; блочным он становится под влиянием браузерных стилей. Примечательно, что у всех мейнстримовых браузеров стиль div элемента указывает display: block, что формирует впечатление, что это -- значение по умолчанию. В свою очередь, когда залезаешь под капот CSS фреймворка, обнаруживаешь, что всё принято сбрасывать на значения по умолчанию и ручками накладывать, казалось бы, очевидные стили. Это всё потому, что фреймворк должен давать одинаковый результат ВЕЗДЕ, а всех браузерных стилей мы предсказать не можем: мало ли что там на китайском телефоне происходит с каким-то браузером, чьё название пишется иероглифами, и разработчик вряд ли знает о его существовании! Данное замечание для начинающих читателей канала.

  • @ВикаОношко-л8ж
    @ВикаОношко-л8ж Рік тому +1

    спасибо.все очень круто и интересно.Продолжайте снимать такие крутые видео !

  • @ПавелАверьянов-э5ш
    @ПавелАверьянов-э5ш 4 роки тому +1

    👍Жека,просто шикарно!!!Спасибо!!!Очень доступно и понятно!!!👍

  • @КириллСеребряков-ц7э

    Я очень благодарен Евгений тебе за твой очень понятный и качественный контент!

  • @maks-rst
    @maks-rst 3 роки тому +1

    Жеесть, какая интересная тема! С меня лайк!

  • @bav1905
    @bav1905 2 роки тому

    Жека дуже дякую тобі за твою працю, розклав на молекули (чітко, легко, корисно і просто)

  • @Сергей-о1п3р
    @Сергей-о1п3р 4 роки тому +2

    Отличное видео! Спасибо за такие уроки!

  • @ape-avto9283
    @ape-avto9283 3 роки тому

    Прикольно, сверстал свой первый сайт, подписался на твой канал и по твоими уроками, всё переделываю))), спасибо за очень полезную инфу!!!

  • @ЕгорАртУльтра
    @ЕгорАртУльтра 4 роки тому +9

    Чувак ты крут)))

  • @СергійК-з5т
    @СергійК-з5т 2 роки тому

    Бомбезний Туторіал від Справжнього Віртуоза... Величезне Вам Людське Спасибі !!!

  • @ЕвгенийБаркас
    @ЕвгенийБаркас 4 роки тому +6

    Заметили, что на полосе прокрутки ролика сделал Жека? Описание, о чем идет речь в это время!!! Это мега полезная вещь.

  • @avk8008
    @avk8008 3 роки тому

    Пушка, просто пушка и очень интересно все рассказано и показано!

  • @DK-ss9rf
    @DK-ss9rf 4 роки тому

    Отличный урок, смотрю, учyсь с огромным удовольствием.

  • @ArtemKolhanov
    @ArtemKolhanov Рік тому

    Дякую за твою працю! Чудово пояснюєш!

  • @z77888
    @z77888 4 роки тому +1

    Это шикарнейший канал!!!

  • @ДмитрийВ-л7э
    @ДмитрийВ-л7э 3 роки тому

    Задорно, информативно и в свободное время)! Супер

  • @AM-cb9ih
    @AM-cb9ih 2 роки тому

    Просто та доступно! Дякую ВАМ!

  • @denisk.1213
    @denisk.1213 3 роки тому +1

    великолепная подача, очень конструктивно! в 27 минут уложил вагон инфы! просматривать буду еще множество раз!) Спасибо)

  • @deniskravchuk707
    @deniskravchuk707 4 роки тому +1

    жирный лайк, без вопросов!

  • @GrifanoRide
    @GrifanoRide 4 роки тому +1

    Замечательны урок) И прекрасная подача) Уже бегу применять)

  • @gorgabrielyan1407
    @gorgabrielyan1407 4 роки тому +1

    Огромное спасибо вам. Я недавно начал заниматься WEB программированием и однозначно могу сказать, что вы меня очень помогли. Удобное и понятное обучения без всякого хлама 👌👍👍👍

  • @РусланКовалёв-щ3л
    @РусланКовалёв-щ3л 4 роки тому +1

    Ещё бы показывали весь код css, было бы вообще все - шикардос. А то иногда не хватает небольшого куска кода, чтобы все заработало

  • @ВладимирЧенченко-т8ж

    Когда начинаю смотреть новый видос ,автоматом ставлю лайк, т.к знаю Жека не подведет

  • @yuriismakota9574
    @yuriismakota9574 4 роки тому +1

    Евгений огромное спасибо за уроки! Информативность, подача, доступность, это просто Вау, нет слов! За твой труд ты заслуживаешь большого успеха!

  • @yuriyv.korytny4059
    @yuriyv.korytny4059 4 роки тому +2

    Спасибо, отличный урок! 👍

  • @TheSkinSmith
    @TheSkinSmith 4 роки тому +1

    да уже все сделал, давай начинай😂👍👍👍,ты крут🙂

  • @Попробуйповторить-е7з

    Спасибо за ваш труд! Желаю творческого успеха

  • @MaximVernigorov
    @MaximVernigorov 3 роки тому

    Какие видео у тебя классные и по контенту и по оформлению, просто бомба! Лайк коммент и поехали:)

  • @konstantino7016
    @konstantino7016 3 роки тому

    Крутой урок! Спасибо Евгений!!!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Напиши в адресе хеш с именем таба

    • @konstantino7016
      @konstantino7016 3 роки тому

      @@FreelancerLifeStyle Евгений, мне конечно стыдно как твоему ученику признаться, но я не до конца понял, куда вписать хэш и что такое имя таба. Сорри.

  • @bq6677
    @bq6677 4 роки тому +3

    Сансей ты вернулся)

  • @АлексейСтупников-д4у

    Здравствуйте! Благодарю Вас за видео!

  • @Polite_person_
    @Polite_person_ 4 роки тому +1

    Как всегда огонь! Спасибо!

  • @portvein7775
    @portvein7775 3 роки тому

    Столько крутых фишек !)) Крутяк)

  • @leonmakedon9317
    @leonmakedon9317 4 роки тому

    Отличный урок, замечательное объяснение. Всё ёмко и добросовестно! Чувствуется, что вы трудитесь! Это лучшее, что я видел на UA-cam. Спасибо вам!!!!

  • @armenakcomp
    @armenakcomp 3 роки тому

    Все испробовал, очень полезно спасибо! Двигаемся дальше... 😉👍