#статья дня

Если вы до сих пор не подписаны на блог Джоша Камю и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

#фишка дня

Плохо с математикой? 360 градусов вводят в ступор? 2π радиан доводят до истерики? Грады это какой-то сплошной гон?

Используй 1 поворот! Вращение элементов никогда ещё не было таким простым!

turn — и готово!

#css #transform #rotate

#статья дня

Если вы до сих пор не подписаны на блог Джоша Комо и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

#фишка дня

Вышел Chrome 104! Что это значит?

Ну, можно почитать в релиз-нотах, конечно (как правильно перевести-то?), но есть там одна совсем забавная вещь. И она на КДПВ.

Скоро не нужно будет следить за порядком трансформаций в анимациях! Очень и очень классно: https://drafts.csswg.org/css-transforms-2/#individual-transforms

Найду PostCSS-плагин для более полной поддержки, закину позже.

#css #transform

#статья дня

Если вы до сих пор не подписаны на блог Джоша Камю и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

#шок дня

Думал ли я, что буду скидывать сюда статьи и видео из 2015 года, а тем более — статьи по производительности из 2015 года, а тем более — статьи по производительности анимаций из 2015 года?

Нет, не думал. Есть разница между вечнозелёным и сиюминутным контентом. Статьи про золотую сетку и правила потока это одно, статьи про анимации — совсем другое. И тем не менее, мы здесь.

Итак, вам, пожалуй, все уши прожужжали о том, что нужно пытаться избегать JS-анимаций, если вам не нужен полный контроль над анимацией. Что все CSS-анимации давно выполняются на GPU с шикарной производительностью. Что браузеры становятся лучше и лучше... А не совсем.

Итак, всем известна библиотека анимаций от GreenSock — GSAP. Её авторы очень постарались, чтобы собрать в ней буквально всё, что нужно. Подражателей и альтернатив море, включая Animate API, но с трона пока не скинули.

И вот в 2015 году они записали интересный вебинар: "CSS animations performance: the untold story", вот и ссылка: https://greensock.com/css-performance/

Ну и сразу на видео: https://youtu.be/1ZWugkJV5Ks

TL;DR: если вы совмещаете transform-анимации с анимированием позиции, вас ждёт неприятный сюрприз.

Погоди, скажете вы, всем известно, что анимировать left-top это мерзко и вообще, ведь богоподобные трансформы исполняются на GPU.

И так-то да, но мы живём в 2023 году, нашими компьютерами можно ядерные взрывы считать десятками за раз, уже нельзя элемент подвинуть? Так что же не так?

А не так, господа, синхронизация потоков выполнения GPU и CPU-анимаций и перерисовок. Даже сейчас, запуская их демо на моём M2, я вижу подёргивания на CSS-версии: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/

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

В общем, рекомендую и видео к просмотру, и CodePen с демо к протыку и приложенные к статье ссылки прочесть.

А почему я вообще начал с упоминания 2015 года? Ну, я думал, за столько лет стало получше. Оказалось, чуть хуже, чем ожидалось.

#css #js #gsap #animation #transform

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform

#новость дня

Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.

А в анимации указали только translate. И бум — никакого вам поворота. Вот так.

А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.

Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX

Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.

#animate #transform #composition

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform #бородач

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform #бородач

#фишка дня

Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.

Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":

.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}

Пример: https://codepen.io/t_afif/pen/XWQMPqY

#css #animation #transform #trick

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#фишка дня

Плохо с математикой? 360 градусов вводят в ступор? 2π радиан доводят до истерики? Грады это какой-то сплошной гон?

Используй 1 поворот! Вращение элементов никогда ещё не было таким простым!

turn — и готово!

#css #transform #rotate #бородач

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.me/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.me/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform #бородач

#статья дня

От перемены мест слагаемых сумма не меняется, не правда ли?

А если речь о композиции? Например, композиции трансформаций в CSS?

Ну, вот, например раз:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

и два

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: translate(-33.1%, 20.2%) scale(3);
}

Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.

А вот если так, три:

.demo {
  transition: transform 1s ease;
  transform: rotate(0);
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.

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

А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/

CSS, конечно, прекрасен.

#css #transform #matrix

#фишка дня

Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.

Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":

.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}

Пример: https://codepen.io/t_afif/pen/XWQMPqY

#css #animation #transform #trick #бородач