CSS3 2D-преобразование

CSS3-преобразования

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

Как это работает?

Эффект преобразования заключается в изменении формы, размера и положения элемента.

Вы можете использовать 2D- или 3D-преобразования, чтобы преобразовать ваши элементы.

Наведите курсор мыши на следующие элементы, чтобы увидеть эффекты 2D- и 3D-преобразований:

Поддержка браузеров

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

Числа, после которых указаны -webkit-, -ms- или -moz-, обозначают первую версию браузера, поддерживавшую свойство с префиксом.

Internet Explorer 10, Firefox и Opera поддерживают свойство transform.

Chrome и Safari требуют версию с префиксом -webkit-.

Примечание:Internet Explorer 9 требует версию с префиксом -ms-.

2D-преобразование

В этой главе вы узнаете о методах 2D-преобразований:

• translate()
• rotate()
• scale()
• skew()
• matrix()

В следующей главе вы узнаете о 3D-преобразованиях.

Пример

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari и Chrome */ }

Попробуйте сами »

Метод translate()

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

Пример

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari и Chrome */ }

Попробуйте сами »

Значение translate (50px, 100px) перемещает элемент на 50 пикселей от левого края и на 100 пикселей от верхнего края.

Метод rotate()

Метод rotate() поворачивает элемент по часовой стрелке на заданный угол. Допускаются отрицательные значения, которые поворачивают элемент против часовой стрелки.

Пример

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari и Chrome */ }

Попробуйте сами »

Значение rotate (30deg) поворачивает элемент на 30 градусов по часовой стрелке.

Метод scale()

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

Пример

-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /*Стандартный синтаксис*/

Попробуйте сами »

scale(2,3) преобразует ширину в 2 раза от исходного размера, а высоту — в 3 раза от исходного размера.

Метод skew()

Синтаксис

transform:skew(<angle> [,<angle>]);

Содержит два значения параметров, представляющих углы наклона вдоль оси X и оси Y. Если второй параметр пуст, по умолчанию используется 0. Отрицательные параметры указывают на наклон в противоположном направлении.

• skewX(<angle>); задаёт наклон только вдоль оси X (горизонтальное направление).
• skewY(<angle>); задаёт наклон только вдоль оси Y (вертикальное направление).

Пример

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari и Chrome */ }

Попробуйте сами »

skew(30deg,20deg)элемент поXоси иYнаклоняет на 20 градусов и 30 градусов вдоль осей.

Метод matrix()

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

У метода matrix шесть параметров, включая функции поворота, масштабирования, перемещения (трансляции) и наклона.

Пример

Используйте метод matrix() для поворота элемента div на 30°.

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari и Chrome */ }

Попробуйте сами »

Новые свойства преобразования

Ниже перечислены все свойства преобразования:

Методы 2D-преобразования