CSS 2D Transforms
Преобразования CSS
Преобразования CSS позволяют переводить, вращать, масштабировать и наклонять элементы.
Преобразование — это эффект, который позволяет элементу изменять форму, размер и положение.
CSS поддерживает 2D и 3D преобразования.
Наведите курсор мыши на элементы ниже, чтобы увидеть разницу между 2D и 3D преобразования:
Поддержка браузеров для 2D преобразований
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют-MS-,-WebKit-,-МОЗ-, или-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- |
2D преобразования CSS
В этой главе вы узнаете о следующих методах 2D преобразования:
translate()rotate()scale()skewX()skewY()matrix()
Совет: В следующей главе вы узнаете о трехмерных преобразованиях.
Метод Translate ()
Метод translate() перемещает элемент из текущей позиции (в соответствии с параметрами, заданными для оси X и оси Y).
В следующем примере перемещается элемент <div> 50 пикселей вправо и 100 пикселей вниз от его текущей позиции:
Пример
div
{
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
Метод поворота ()
Метод rotate() вращает элемент по часовой стрелке или против часовой стрелки в зависимости от заданного градуса.
В следующем примере элемент <div> вращается по часовой стрелке с 20 градусами:
Пример
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
При использовании отрицательных значений элемент будет вращаться против часовой стрелки.
В следующем примере элемент <div> вращается против часовой стрелки на 20 градусов:
Пример
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Метод Scale ()
Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).
В следующем примере элемент <div> увеличивается в два раза от его исходной ширины и в три раза от его исходной высоты:
Пример
div
{
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}
В следующем примере элемент <div> уменьшается до половины исходной ширины и высоты:
Пример
div
{
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
}
Метод скевкс ()
Метод skewX() наклоняет элемент вдоль оси X заданным углом.
Следующий пример искажает элемент <div> 20 градусов вдоль оси X:
Пример
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Метод наклона ()
Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.
Следующий пример искажает элемент <div> 20 градусов вдоль оси Y:
Пример
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Метод наклона ()
Метод skew() искажает элемент вдоль оси X и Y по заданным углам.
В следующем примере наклон элемента <div> 20 градусов вдоль оси X и 10 градусов вдоль оси Y:
Пример
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Если второй параметр не указан, он имеет нулевое значение. Таким образом, следующий пример искажает элемент <div> 20 градусов вдоль оси X:
Пример
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Метод Matrix ()
Метод matrix() объединяет все методы 2D преобразования в один.
Метод Matrix () принимает шесть параметров, содержащих математические функции, которые позволяют вращать, масштабировать, перемещать (переводить) и наклонить элементы.
Параметры следующие: Матрица (scaleX (), перекос (), скевкс (), масштабирование (), транслатекс (), транспоздний ())
Пример
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Свойства преобразования CSS
В следующей таблице перечислены все 2D-преобразования свойств:
| Свойство | Описание |
|---|---|
| transform | Применяет 2D или 3D преобразование к элементу |
| transform-origin | Позволяет изменить положение на преобразованных элементах |
2D Transform Methods
| Function | Описание |
|---|---|
| matrix(n,n,n,n,n,n) | Определяет 2D преобразование, используя матрицу из шести значений |
| translate(x,y) | Определение 2D перевода, перемещение элемента вдоль оси X и Y |
| translateX(n) | Определение 2D перевода, перемещение элемента по оси X |
| translateY(n) | Определение 2D перевода, перемещение элемента по оси Y |
| scale(x,y) | Определяет преобразование 2D масштаба, изменение ширины и высоты элементов |
| scaleX(n) | Определяет преобразование 2D масштаба, изменяя ширину элемента |
| scaleY(n) | Определяет преобразование 2D масштаба, изменяя высоту элемента |
| rotate(angle) | Определяет 2D вращение, угол задается в параметре |
| skew(x-angle,y-angle) | Определяет преобразование 2D наклона вдоль оси X и Y |
| skewX(angle) | Определяет преобразование 2D наклона вдоль оси X |
| skewY(angle) | Определяет преобразование 2D наклона вдоль оси Y |