7 комментариев

1. Мне кажется тут не раскрыто какие ВОЗМОЖНОСТИ даёт разный порядок трансформации.
   Вот допустим:
   Квадратик 100x100px.
   Увеличиваем по горизонтали в полтора раза поворачиваем на 45 градусов. Получаем прямоугольник, под углом 45 градусов.
   Поворачиваем на угол 45 градусов и растягиваем по горизонтали на в полтора раза. Получаем приплюснутый ромбик.
   Правда в CSS реализация будет обратной.
   для первого случая код будет
   
transform: scaleX(1.5) rotate(-45deg)

   а для второго случая:
   
transform: rotate(-45deg) scaleX(1.5)

   Почему такая рокировка?
   Всё дело в пресловутой линейной алгебре координатной сетке:
   мы сначала меняем КООРДИНАТНУЮ СЕТКУ в которой лежит пресловутый квадратик, а потом вращаем в новой координатной сетке. В результате, при вращении прямоугольника, вылезает приплюснутый ромбик — всё дело в том, что вращаем мы квадрат, поэтому и получается робмик, просто в изменённой координатной сетке и квадрат и ромбик растянуты.
   А в случае когда у нас получается повёрнутый прямоугольник, ситуация другая, мы СНАЧАЛА вращаем координатную сетку и когда она становится у нас под углом 45 градусов, изменяем масштабирование по координате.
   У меня встречный вопрос: а есть ли способы, проводить подобные преобразования, когда одна из осей задана в абсолютных единицах, а другая — в относительных?…

   Ответить

   1. Всё верно — каждая последующая трансформация происходит в координатной системе, измененной предыдущими трансформациями. У нас когда-то давно был перевод статьи, поясняющей стоящую за этим «линейную алгебру» максимально наглядными примерами. Просто здесь у автора явно был акцент не на возможностях этого для понимающих, а на неочевидности этого для новичков.

      Вопрос я не совсем понял. Как я понимаю, единицы координат в любом случае считаются абсолютными (CSS-пиксели), просто после трансформации они иначе пересчитываются в пиксели экрана. Можно уточнить вопрос?

      Ответить

      1. Всё верно — каждая последующая трансформация происходит в координатной системе, измененной предыдущими трансформациями.

         Кстати, классное определение! Я всё думал как же обобщить :)

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

         Да, согласен.
         Между прочим, я тоже обратил внимание, что с точки зрения человека, у преобразований, не совсем интуитивная логика. Привычная логика, это: взял, растянул перевернул, а там получается растянул, а начал вращать, изменения происходят словно в кривом зеркале. И понять, почему они так происходят и как сделать нужные изменения, не вполне тривиально, хотя логика не такая уж сложная, но не совсем интуитивная.
         А то, что все трансформации для объекта должны быть в одном месте, иначе они просто перезапишутся — автор привёл довольно наглядный пример, в котором демонстрируется некая избыточность применяемого по-умолчанию подхода(хотя в этом, по видимому, есть логика с точки зрения рендеринга страницы).
         Вопрос такой: нужно сделать ромбик, чтоб по вертикали высота была фиксированная, а ширина, зависала от родителя. Хотелось бы понять, такое в принципе возможно? При этом ромбик должен быть цельным, то есть заливаться градиентом, откидывать тень и т.п.

         Ответить

      2. У нас когда-то давно был перевод статьи, поясняющей стоящую за этим «линейную алгебру» максимально наглядными примерами.

         По статье пробежался, ну не совсем понятно :) В первом приближении, я вникал в матрицы и задавался вопросами «почему этот параметр влияет на вот это»… Похоже, матричный подход наиболее универсален, и, видимо, к этому вопросу стоит ещё вернуться…
         В математических выкладках, одна из основных трудностей — сложность языка. Объясняют КАК это работает, но не объясняют ЧЕМ удобна именно такая реализация, какие в этом скрываются возможности. Не «как легко можно сделать то-то и то-то», а именно что на что влияет и почему. Если показать это достаточно наглядно, пусть и подробно, то вникнув в метод, он может превратится из препятствия в инструмент…

         Ответить

2. Да и ещё, извините за дремучесть, но всё же, что это за переменные на чистом CSS (я так понял начинающиеся с --), и где про это почитать?..
   я так понимаю вот характерный пример:
   
.via-variables {
--y: -150%;
--scale: 1;
--rotation: 0deg;

   transform: translateY(var(--y)) scale(var(--scale)) rotate(var(--rotation));
}
.via-variables:hover {
--scale: .8;
}
.via-variables:active {
--rotation: 180deg;
}


   Ответить

   1. Это возможность из нового CSS-модуля (уже больше года как кандидат в рекомендации), правильнее называть их пользовательскими/кастомными CSS-свойствами, но старое название «CSS-переменные» успело прижиться в обиходе. Про них есть хорошая статья на frontender.info, ну и у нас на сайте есть несколько статей по теме:)

      Ответить

      1. хорошая статья на frontender.info

         — статья и правда замечательная, а возможность просто чудесная! :-)

         Ответить