CSS3-преобразования — это способ преобразования стандартного HTML-элемента в двух или трехмерное пространство. Думайте об этом как о формовании предмета, перемещая, растягивая или сжимая его координаты. Хотя преобразования часто объединяются для создания эффектов, не путайте их с переходами, которые используются для плавной анимации элемента между двумя состояниями.
Это первая из пяти статей о CSS3 2D и 3D трансформациях. Каждая статья может быть прочитана индивидуально или не по порядку.
Скучные коробки
HTML-страницы создаются с использованием прямоугольных блоков. Вы можете применить закругленные углы и небольшое затенение, но под поверхностью у нас все еще есть прямоугольник. То же самое обычно верно для объектов и слоев в графических пакетах, таких как Photoshop. Но дизайнер может манипулировать элементом разными способами, например, перемещая его в другое место, изменяя его размер, поворачивая его, наклоняя его и многое другое.
CSS3 2D Transformation Module позволяет вам применять графический пакет как эффекты манипуляции только в CSS. Стоит отметить, что многих из этих эффектов было бы трудно достичь другими способами; вам нужно будет вернуться к изображениям, использовать сложное решение JavaScript и canvas, или, возможно, Flash или Silverlight. Ни одна из этих опций не позволит вам напрямую манипулировать элементом HTML; вам нужно заменить оригинальную коробку чем-то другим.
Базовый синтаксис и кросс-браузерная поддержка
Преобразования применяются с использованием свойства transform
transform: function(values);
Firefox, IE10 и Opera 12 понимают transform
На момент написания статьи браузеры Webkit / Blink — Chrome, Safari и Opera 15+ — требовали префикса -webkit:
-webkit-transform: function(value);
Наконец, IE9 поддерживает базовые 2D-преобразования с префиксом -ms:
-ms-transform: function(value);
Я не буду включать в эти демонстрации специфичный для IE9 код — браузер должен быть мертв и похоронен в течение нескольких месяцев.
Однако следует помнить, что кросс-браузерная согласованность имеет недостатки, особенно когда вы комбинируете преобразования с другими свойствами и анимацией. Если вы вспомните мой основной пример анимации , вы заметите, что Chrome забывает применять другой цвет фона и радиус границы в течение цикла анимации. Несмотря на то, что вряд ли вы сломаете страницу, если преобразование завершится неудачно, тестируйте заранее и часто тестируйте на разных браузерах.
Также обратите внимание, что IE10 поддерживает 3D-преобразования, но в нем отсутствует поддержка ключевого свойства, которое влияет на то, как вы обрабатываете элементы — мы узнаем больше позже в этой серии.
Поток документов
Важно понимать, что преобразование элемента не влияет на поток документов. Пространство, которое потребовалось бы для не преобразованного поля, останется независимо. Даже если вы уменьшите элемент, чтобы он стал невидимым, или переместите его за пределы экрана, его первоначальное пространство останется.
Посмотрите демонстрационную страницу преобразования трансляций …
Надеюсь, ваш аппетит разгорелся! Во второй статье мы рассмотрим общие функции двумерного преобразования.