Отдельные свойства преобразования CSS

От автора: CSS-трансформации в интернете появились вместе с CSS-анимациями и CSS-переходами для добавления визуальных эффектов и движения в Интернете. Эти технологии были основным продуктом веб-платформы и инструментария веб-разработчиков более десяти лет. Фактически, свойство CSS transform впервые появилось в Safari еще в июле 2008 года, когда появилась iPhone OS 2.0. Вы можете найти некоторые архивные публикации о начальной поддержке в WebKit с октября 2007 года и еще одну публикацию от июля 2009 года, посвященную 3D-преобразованиям, когда CSS-преобразования поставляются в Mac OS X Leopard.

А теперь несколько новостей из мира CSS-преобразований: отдельные свойства преобразования включены по умолчанию в Safari Technology Preview 117. Это означает, что, как и в Firefox и Chrome Canary, теперь вы можете использовать новые свойства перевода, вращения и масштабирования чтобы указать, какие функции свойств преобразования существуют на сегодняшний день, включая 3D-операции.

Использовать эти свойства просто, и веб-разработчики должны чувствовать себя уверенно в этом. Рассмотрим эти два эквивалентных примера:

Но зачем использовать эти новые свойства вместо свойства transform? Одна из причин – удобство — проще написать scale(2), когда все, что вам нужно сделать, это масштабировать элемент.

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

Ваш flipped класс будет работать нормально, даже если свойство поворота или преобразования применяет поворот к элементу.

Эта функция также пригодится при анимации преобразований. Допустим, вы пишете анимацию, которая масштабирует элемент вверх по всей его продолжительности, но также применяет вращение для второй половины этой анимации. С помощью свойства transform, вам пришлось бы предварительно вычислить, какими должны быть промежуточные значения для шкалы, когда вращение начнется и закончится:

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

Вы можете легко изменить ключевые кадры и добавить другие свойства по своему усмотрению, оставив браузеру решать, как правильно применить эти отдельные свойства преобразования. Но это не все; также есть случай, когда вы хотите, чтобы отдельные анимации применялись к элементу одновременно. Вы можете разделить этот единственный набор ключевых кадров на два разных набора и вместо этого настроить время:

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

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

Но как насчет свойства transform? Как это соотносится с этими новыми индивидуальными свойствами преобразования?

Во-первых, помните, что свойство преобразования поддерживает функции преобразования, которые не представлены как отдельные свойства преобразования. Не существует эквивалентных свойств CSS для функций skew(), skewX() и skewY(), а также нет свойства, эквивалентного функции matrix().

Но что происходит, когда вы указываете некоторые из отдельных свойств преобразования, а также свойство преобразования? Спецификация CSS Transform Level 2 объясняет, как отдельные свойства преобразования и свойства transform-origin и transform составляются для формирования текущей матрицы преобразования. Подводя итог, сначала применяются отдельные свойства преобразования — сдвиг, поворот, а затем масштабирование — а затем применяются функции в свойстве преобразования.

Это означает, что существует четкая модель для использования этих отдельных свойств преобразования и свойства преобразования вместе, чтобы расширить ваши возможности преобразования контента на веб-платформе.

И прежде чем вы начнете использовать эти новые свойства, важно знать, как определять их доступность и использовать преобразование как запасной вариант. Здесь правило @supports позволит вам делать то, что вам нужно:

Мы рекомендуем вам начать изучение того, как использовать эти три новых свойства в Safari Technology Preview в ваших проектах, и отправлять отчеты об ошибках на bugs.webkit.org, если вы столкнетесь с неожиданными проблемами. Вы также можете отправить твит на @webkit или @jonathandavis, чтобы поделиться своим мнением об отдельных свойствах преобразования.

Автор: Antoine Quint

Источник: webkit.org

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии запрещены.