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

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

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

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

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

.flipped { scale: -1;
}

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

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

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

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

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

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

.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 }
}

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

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

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

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

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

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

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

@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

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

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