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

Отдельные свойства преобразования 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-операции.

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

CSS

123456789div.transform-property {    transform: translate(100px, 100px) rotate(180deg) scale(2);} div.individual-properties {    translate: 100px 100px;    rotate: 180deg;    scale: 2;}

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

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

CSS

123.flipped {    scale: -1;}

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

READ
Новый инструмент Яндекс.Вебмастра для анализа и управления отзывами

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

CSS

12345@keyframes scale-and-rotate {    0%   { transform: scale(1) }    50%  { transform: scale(1.5) rotate(0deg) }    100% { transform: scale(2) rotate(180deg) }}

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

CSS

12345@keyframes scale-and-rotate {    0%   { scale: 0 }    50%  { rotate: 0deg }     100% { scale: 1; rotate: 180deg; }}

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

CSS

123456789101112131415.animated {    /* Apply the scale keyframes for 1s and the rotate       keyframes for 500ms with a 500ms delay. */    animation: scale 1s, rotate 500ms 500ms;} @keyframes scale {    from { scale: 0 }    to   { scale: 1 }} @keyframes rotate {    from { rotate: 0deg }    to   { rotate: 180deg }}
READ
Теперь отзывы о сайте выводятся в специальном разделе Яндекс.Браузера

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

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

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

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

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

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

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

CSS

READ
Руководство по новым современным селекторам псевдоклассов CSS
12345678910111213@supports (translate: 0) {    /* Individual transform properties are supported */    div {        translate: 100px 100px;    }} @supports not (translate: 0) {    /* Individual transform properties are NOT supported */    div {        transform: translate(100px, 100px);    }}

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

Автор: Antoine Quint

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

Источник

Оценить статью
Блог о самом интересном.