① Введение в CSS3-трансформации

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

Содержание:

1. Введение в CSS3-трансформации

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

3. Точка трансформации transform-origin

4. Множественные трансформации и трансформации на практике

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

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block;, а также элементы, значение свойства display которых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption. Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

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

Поддержка браузерами

IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-

Продолжение в следующей статье!