CSS от А до Я работа с трансформациями по оси Y и матрицами


Содержание материала:

Самоучитель

CSS3 трансформации определяют, каким станет тот или иной блочный элемент. Трансформации преобразовывают элемент, не влияя на остальные части веб-документа, т.е. другие объекты не сдвигаются относительно него. По умолчанию трансформации происходят относительно центра элемента. Свойства не наследуются. Существуют два вида CSS3 трансформаций – 2D и 3D. 2D-трансформации, в отличие от 3D-трансформаций, имеют более широкую поддержку браузерами.

Поддержка

1. Точка трансформации

Свойство позволяет сместить точку, относительно которой происходит трансформация элемента. Значение по умолчанию — center , или 50% 50%

transform-origin
Значения:
ось Х( left , center , right , длина, % )
ось Y( top , center , bottom , длина, % )
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов, определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента. Пример смотрите здесь.

Синтаксис

2. Функции 2D-трансформации

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

Допустимые значения:

matrix() — любое число

translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %

scale() , scaleX() , scaleY() — любое число

rotate() , rotateX() , rotateY() — угол (deg, grad, rad или turn)

skew() , skewX() , skewY() — угол (deg, grad, rad)

CSS3 — трансформации

Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

Поворот

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

В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.

Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

Единицы измерения угла поворота CSS3-трансформации

Единица измерения CSS3-обозначение Описание Пример
Градусы deg Угол полной окружности 360° rotate(90deg)
Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

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

Масштабирование

Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

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

Теперь растянем элемент в два раза по оси X:

Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

Перемещение

Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

Искажение

Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

Использование нескольких трансформаций

Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

Что можно трансформировать — css3

Существует две группы доступных CSS3-трансформаций: 2D и 3D. 2D-варианты намного более широко реализованы, поддерживаются браузерами и, несомненно, более просты в написании, поэтому сначала взглянем на них. CSS3 2D Transforms Module позволяет использовать следующие трансформации:

scale — применяется для масштабирования элементов (чтобы делать их больше или меньше);

translate — дает возможность сдвигать элементы на экране (вверх, вниз, влево и вправо);

rotate — позволяет поворачивать элементы на заданную величину (определяемую в градусах);

skew — используется для скашивания элементов по осям координат X и Y;

matrix — позволяет смещать элементы и задавать форму их трансформаций с точностью до пиксела.

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

Мы уже рассматривали эту трансформацию ранее. Тогда мы задавали положительные значения. Однако вам следует знать, что, применяя значения меньше 1, можно уменьшать элементы (рисунок 7.5). Приведенный далее код позволит уменьшить элемент наполовину:

Transform: scale (0.5);

При наведении указателя мыши ссылка уменьшается

Transform: translate (40px, 0px);

Команда translate дает браузеру указание сдвинуть соответствующий элемент на величину, определяемую либо в пикселах, либо в процентах. Этот синтаксис будет применяться так: сначала элемент сдвинется слева направо (на 40 пикселов в нашем случае), а затем сверху вниз (на 0 пикселов в нашем случае, благодаря чему он останется на одной линии с прочими навигационными элементами). Положительные значения, указанные в скобках, приводят к сдвигу элемента вправо или вниз, а отрицательные — к сдвигу элемента влево или вверх. Таким образом, в результате применения этого объявления к навигационной ссылке в выделенном состоянии она сдвинется на 40 пикселов вправо, когда пользователь наведет на нее указатель мыши (рисунок 7.6).

При наведении указателя мыши ссылка сдвигается вправо

Transform: rotate (90deg);

Команда rotate позволяет поворачивать элементы. В этом примере мы заставили ссылку поворачиваться на 90° при наведении на нее указателя мыши. На рисунке 7.7 показано, как все это будет выглядеть в браузере.

Топ-пост этого месяца:  Дропшиппинг - что это и как работает, плюсы и минусы системы

При наведении указателя мыши ссылка поворачивается

Значение в скобках всегда следует указывать в градусах (например, 90deg). Однако это не помешает вам посумасбродничать — вы можете заставить элементы вращаться, указав значение вроде следующего:

Transform: rotate (3600deg);

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

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

Transform: skew (10deg, 2deg);

Применение этого кода к ссылке приведет к следующему результату (рисунок 7.8).

Первое значение — это угол скоса элемента по оси X (10deg в нашем примере), а второе (2deg) — угол скоса элемента по оси Y. Если не указать второе значение,

При наведении указателя мыши ссылка перекашивается

То по оси X (по горизонтали) будет применен скос произвольной величины. Например:

Transform: skew (10deg);

Этот код абсолютно правильный, однако он обеспечит скашивание элемента только по оси X. Значения обязательно нужно указывать в градусах. Положительные значения всегда приводят к вращению элемента по часовой стрелке, а отрицательные — против часовой стрелки.

Вернемся к вопросу о слишком переоцененных фильмах. Что такое? Вы хотите узнать о CSS3-трансформации matrix, а не о фильме с одноименным названием? Ох, ну ладно.


Синтаксис трансформации matrix выглядит пугающе:

Transform: matrix (1.678, -0.256, 1.522, 2.333, -51.533, -1.989);

По сути, вы можете объединять ряд отличающихся трансформаций (scale, rotate, skew и т. д.) в одно объявление. Приведенное чуть выше объявление обеспечит в браузере следующий эффект (рисунок 7.9).

При наведении указателя мыши к ссылке применяется несколько трансформаций.

Я люблю справляться с самыми сложными задачами (если только речь не идет о том, чтобы высидеть до конца фильма «Мулен Руж»), однако уверен, что вы согласитесь с тем, что попытка разобраться в данном синтаксисе может превратиться в настоящее испытание. Все станет еще хуже, когда вы заглянете в спецификацию и осознаете, что для его полного понимания потребуется хорошее знание математики: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface.

Матричные трансформации для хитрецов и ленивых. Меня нельзя назвать математиком даже с самой большой натяжкой, поэтому, столкнувшись с необходимостью создать трансформацию на основе матрицы, я решил схитрить. Если ваши познания в математике тоже не блещут, то я рекомендую вам зайти по адресу http://www.useragentman.com/matrix/ (рисунок 7.10).

Сайт Matrix Construction Set позволяет перетаскивать элементы именно так, как вы желаете, а также предусматривает возможность выполнить старую добрую операцию копирования и вставки кода (включая префиксы поставщиков) для ваших CSS-файлов.

Трансформации, переходы и анимации

Трансформации

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

Вращение

Для поворота элемента свойство transform использует функцию rotate :

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

Масштабирование

Применение масштабирования имеет следующую форму:

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

Используя отрицательные значения, можно создать эффект зеркального отражения:

Перемещение

Для перемещения элемента используется функция translate :

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

Наклон

Для наклона элемента применяется функция skew() :

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

Или наклон на 45 градусов только по оси Y:

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

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

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

3D-трансформации в CSS

С помощью 3D-трансформаций, появившихся в спецификации CSS3, есть возможность управлять поведением объекта по оси Z. Если говорить буквально, то данная ось расположена перпендикулярно экрану, т. е. по сути она смотрит зрителю в лицо.

Функции 3D-трансформации являются расширенными функциями двухмерных трансформаций, в которые добавлен параметр для оси Z. Этими функциями являются, например, translate3d() , rotate3d() , scale3d() , а также одиночные записи, такие как translateZ() , rotateZ() , scaleZ() .

Функция perspective()

Кроме всего прочего, в CSS3 была добавлена еще одна функция — perspective() , которая может быть использована для создания эффекта перспективы, глубины в сцене. Перемещая элемент по оси Z с установленной перспективой, можно наблюдать, как он приближается или отдаляется от зрителя.

Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:

На схеме показано, как масштабирование зависит от перспективы и значения Z. На верхнем рисунке Z составляет половину d. Для того, чтобы создать впечатление, что исходный круг (который нарисован сплошным контуром) стал ближе к зрителю (круг, нарисованный пунктиром), круг увеличивается в два раза (результат показан в качестве голубого круга). На нижнем рисунке круг уменьшен на одну треть, чтобы создать впечатление, что он отдалился от исходного положения и зрителя.

Без указания перспективы все точки в Z-пространстве сплюснуты в 2D-плоскости, и восприятие глубины будет отсутствовать как таковое. Для некоторых трансформаций, таких как перемещение (translate) по оси Z, функция перспективы играет важную роль, поскольку делает возможным передать визуальный эффект 3D-трансформации.

Топ-пост этого месяца:  Какие программы устанавливать на Андроид в первую очередь

Ниже показаны примеры того, как выглядят элементы с перспективой и без:

Perspective-origin — точка отсчета

Для перспективы можно изменить точку отсчета при помощи свойства perspective-origin . Оно словно задает точку расположения зрителя при взгляде на перспективу. По умолчанию эта точка находится в центре элемента, но можно определить координаты точки по осям X и Y, из которой наблюдатель будет смотреть на дочерние элементы:

Обратная сторона элемента: backface-visibility

Когда элемент вращается в 3D-пространстве вокруг горизонтальной или вертикальной оси, его обратная сторона по умолчанию видна (visible). При этом содержимое элемента с другой стороны отображается зеркально:

На примере выше правый квадрат повернут по оси Y на 180 градусов. Свойство backface-visibility со значением visible не скрывает содержимое блока, и оно отображается зеркально.

Но если установить для свойства backface-visibility значение hidden , то содержимое элемента будет скрыто с его обратной стороны (включая фон блока). По сути, объект будет невидим на экране, пока он повернут обратной стороной к зрителю.

Но эта возможность может пригодиться, если вам необходимо создать впечатление, что у объекта имеется две стороны. На примере ниже показано, как можно создать игральную карту, используя два фоновых изображения и свойство backface-visibility: hidden . Повернув карту по оси Y на угол более 90 градусов, можно увидеть, как карта развернулась «рубашкой» к зрителю, а лицо карты при этом скрылось:

Эффект двухсторонней игральной карты на CSS3
(кликните по картинке, чтобы увидеть код)

Код HTML для данного примера:

Код CSS для данного примера:

Таковы особенности работы с 3D-пространством в CSS3. Рекомендуем самостоятельно попрактиковаться для лучшего понимания поведения трехмерных элементов. Также не забывайте про префиксы производителей — в реальном проекте их использование обязательно.

В следующем уроке вы узнаете, как заставить объекты плавно переходить от одного состояния к другому. Для этого мы изучим CSS3-свойство transition и все его значения.

СSS3 2D Трансформация

CSS3 Трансформация

CSS3 трансформация позволяет преобразовывать, поворачивать, масштабировать и наклонять элементы.

Трансформация — это эффект, который позволяет элементу изменять форму, размер и положение.


CSS3 поддерживает 2D и 3D преобразования.

Наведите мышь над элементами, чтобы увидеть разницу между 2D и 3D трансформации:

Поддержка браузера для 2D трансформации

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номер, за которыми следуют -webkit- , -moz- , или -o- указывает первую версию, которая работает с префиксом.

Свойство
transform 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-

CSS 2D Трансформация

В этой главе вы узнаете о следующих методах 2D трансформации:

Совет: Вы узнаете о 3D трансформации в следующей главе.

Метод translate()

Метод translate() перемещает элемент из текущего положения (в соответствии к параметрам, заданным для оси X и Y).

В следующем примере элемент

Пример

Метод rotate()

Метод rotate() поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

Метод в следующем примере, элемент

Пример

Использование отрицательных значений повернет элемент против часовой стрелки.

Метод следующий пример вращает элемент

Пример

Метод scale()

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

Метод в следующем примере элемент

Пример

Метод в следующем примере элемент

Пример

Метод skewX()

Метод skewX() наклоняет элемент вдоль оси X на заданный угол.

Метод следующий пример наклоняет элемент

Пример

Метод skewX()

Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.

Метод в следующем примере элемент

Пример

Метод skewY()

Метод skew() наклоняет элемент вдоль осей X и Y на заданные углы.

Метод в следующем примере элемент

Пример

Если второй параметр не указан, он имеет нулевое значение. В следующем примере элемент

Пример

Метод matrix()

Метод matrix() объединяет все 2D методы преобразования в один.

Метод matrix() принимает шесть параметров, содержащих математические функции, что позволяет вращать, масштабировать, перемещать (переводить) и наклонять элементы.

Метод параметров: matrix(scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY())

Пример

Проверьте себя с помощью упражнений!

Свойства CSS3 трансформации

Метод в следующей таблице перечислены все свойства преобразования 2D:

Функции 3D-трансформации в CSS

Добавьте еще одно измерение к веб-страницам с помощью новых функций 3D-преобразования в CSS. Разберемся с масштабированием, вращением, перспективой, а также проблемами z-index и подводными камнями браузеров.

HTML-элементы могут быть трансформированы в трех направлениях:

  • горизонтальная ось X;
  • вертикальная ось Y;
  • и уходящая вглубь монитора ось Z.

Считается, что поверхность экрана — это начало Z-оси. Объекты с положительными Z-координатами будут выдвигаться ближе к пользователю, а с отрицательными — перемещаться вдаль. При добавлении перспективы слой с большим отрицательным Z-значением может полностью пропасть.

Следует отметить несколько моментов:

  1. CSS может только преобразовать двумерные элементы HTML в трехмерном пространстве. Сами элементы остаются плоскими и имеют нулевую глубину. Масштабирование в z-плоскости не сделает из квадрата куб. В принципе, вы можете создать полноценный куб, но для этого потребуется шесть элементов: по одному для каждой стороны.
  2. 3D-преобразования отлично подходят для создания эффектов страницы, но вряд ли позволят создать следующий MineCraft или Call of Duty. Сложные модели лучше реализовать с использованием WebGL.

3D преобразования хорошо поддерживаются во всех современных браузерах (включая IE10+) с некоторыми исключениями:

  • Internet Explorer не поддерживает transform-style: preserve-3d , что делает невозможным создание 3D сцен.
  • Все версии Safari должны использовать префикс -webkit-backface-visibility для скрытия задних граней. Все остальные браузеры поддерживают свойство backface-visibility .

На примере вы можете увидеть, как работают CSS-трансформации, которые будут разобраны ниже:

transform

К любому элементу можно применить свойство transform . Оно принимает функцию с одним или несколькими параметрами. Например:

Трансформация элементов

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform


CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:

  • В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах ( grad) . Полный круг равен 400grad,
  • В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно «вернуть на место», то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

Топ-пост этого месяца:  Как сделать кнопку со ссылкой на сайт в товарах ВКонтакте

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

CSS transform: matrix — очень просто о матрицах преобразований

У меня несколько раз спрашивали про css свойство transform: matrix. Эта штука не особо сложная, да и поддерживается уже практически везде.

Трансформировать можно только в 2D пространстве. Т.е. повернуть содержимое как например на иконке Windows 10 не получится.
По идее, так вот выглядит сама матрица

В CSS записывается так, третий столбик отбрасывается
transform: matrix(a,b,c,d,t1,t2);

И собственно, что эти все буквы означают:
a — масштабирование по горизонтали. По умолчанию равно 1. Это как 100% размер. Если написать больше единицы, то оно соответственно будет тянуться. Скажем, 2 растянет его как 200%.
Ну а если указать отрицательное число, скажем, -1, то содержимое будет масштабироваться в параллельную вселенную в отраженном виде. Например:

b — Наклон по горизонтали. Тут ничего интересного, всё максимально просто. Больше нуля — наклон вправо, меньше — влево.

c — Наклон по вертикали. Тут тоже почти ничего интересного. Больше нуля — наклон вверх, меньше — вниз.

Вы наверное смотрите на эти повороты выше и думаете: чё за херня? А как повернуть нормально?
Терпение, о том как повернуть нормально я расскажу ниже. Для начала я хочу рассказать об остальных свойствах.

d — масштабирование по вертикали. Всё что я писал выше про свойство а применимо так же и к нему. При отрицательном значении отражает по вертикали.

t1 и t2 — это просто обычное смещение. t1 смещает по горизонтали. Если значение положительное, то двигает вправо, если отрицательное, то влево.
t2 — смещение по вертикали. Положительное значение — сдвигаемся вниз, отрицательное — сдвигаемся вверх. Эти штуки практически никто не использует, в CSS есть множество других фишек для позиционирования, причём более прикольных.

А теперь о нормальных поворотах
Например, мы хотим повернуть наш контент на 45 градусов с сохранением всех пропорций. Надеюсь, вы не прогуляли синусы и косинусы в школе. А если прогуляли, можете воспользоваться калькулятором
45 градусов — это n, чтобы не перепутать. Можете подставить сюда своё значение и считать. Теперь нам нужно найти значения a,b,c,d
Они будут такими:

Теперь считаем:
В моём случае получается:

Как видите, всё не очень-то и сложно. Если есть вопросы — пишите в комментарии или в нашу группу в ВК, я отвечу на все Ваши вопросы.

Матрица преобразований для CSS трансформаций

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

Исходный элемент Поворот
Наклон Так сделать нельзя

Сама матрица имеет размер 3х3 и в общем виде записывается так:

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

Роль каждого коэффициента матрицы представлена в таблице ниже:

Коэфф. Преобразование Описание
a Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
b Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
c Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз.
d Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
tx Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное — влево.
ty Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз. При отрицательном значении — вверх.

Для наглядности действие каждого коэффициента вы можете проверить на данной форме:

Матрица преобразований в браузерах

Для трансформации элемента применяется CSS стиль transform, который принимает в качестве значения ключевое слово matrix , в котором перечисляются коэффициенты нашей матрицы преобразований.

Обратите внимание на порядок коэффициентов, это имеет принципиальное значение!

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

Если вам нужна поддержка Internet Explorer до версии 9.0, то придется также использовать нестандартное свойство filter.

Единичная матрица

Если в матрице коэффициенты a и d равны 1, а остальные элементы матрицы нулевые, то такая матрица называется единичной. Эта матрица применяется по умолчанию, поскольку не приводит к какой-либо трансформации элемента. Поэтому, если вам нужно сделать только один вид преобразований, то берите за основу единичную матрицу.

Масштабирование

Чтобы увеличить размер элемента, скажем, в два раза по горизонтали, коэффициент a следует установить равным 2, а остальные коэффициенты оставить как в единичной матрице.

Считаем новые координаты:

x’ = 2*x + 0*y + 0
y’ = 0*x + 1*y + 0

Отражение

Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1, или эти значения одновременно для отражения и по горизонтали, и по вертикали.

Наклон

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим b=1 и посмотрим, какие преобразования получатся.

x’ = 1*x + 0*y + 0
y’ = 1*x + 1*y + 0

Таким образом, меняется только координата y, которая увеличивается на значение x, что и приводит к наклону элемента. В примере ниже мы сделали у коэффициента b отрицательное значение чтобы наклонить элемент вправо.

Поворот

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

Сам поворот происходит по часовой стрелке, α задает угол поворота в градусах.

Перемещение

За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселов, Firefox, кроме того, единственный браузер, который поддерживает и другие единицы, например, em.

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

Подводим итоги

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

Добавить комментарий