Преобразовать - CSS-хитрости

Anonim

transformСвойство позволяет визуально манипулировать элемент с помощью перекоса, поворота, перевода, или масштабирования:

.element ( width: 20px; height: 20px; transform: scale(20); )

Даже с заявленными высотой и шириной этот элемент теперь будет увеличен в двадцать раз от исходного размера:

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

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

.element ( transform: scale(2, .5); )

Или вы можете быть более конкретным, не используя сокращенную функцию:

transform: scaleX(2); transform: scaleY(.5);

Но scale()это лишь одна из многих доступных функций преобразования:

Значения

  • scale(): Влияет на размер элемента. Это также относится и к font-size, padding, heightи widthэлемент, тоже. Это также аа функция стенографии для scaleXи scaleYфункций.
  • skewX()и skewY(): наклоняет элемент влево или вправо, как прямоугольник в параллелограмм. skew()это сокращение, которое объединяет skewX()и skewYпринимает оба значения.
  • translate(): Перемещает элемент в сторону или вверх и вниз.
  • rotate(): Вращает элемент по часовой стрелке от его текущего положения.
  • matrix(): Функция, которая, вероятно, не предназначена для написания вручную, но объединяет все преобразования в одно целое.
  • perspective(): Не влияет на сам элемент, но влияет на преобразования трехмерных преобразований дочерних элементов, позволяя им всем иметь последовательную перспективу глубины.

Перекос

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Функции skewXи skewYtransform наклоняют элемент в ту или иную сторону. Помните: не существует сокращенного свойства для наклона элемента, поэтому вам нужно использовать обе функции. В приведенном ниже примере мы можем наклонить квадрат размером 100 x 100 пикселей влево и вправо с помощью skewX:

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

В этом примере мы можем наклонить элемент по вертикали с помощью skewY:

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

Теперь давайте skew()объединим два:

См.
Сокращенное свойство Pen skew () от CSS-Tricks (@ css-tricks)
на CodePen.

Повернуть

.element ( transform: rotate(25deg); )

Это поворачивает элемент по часовой стрелке от его исходного положения, в то время как отрицательное значение поворачивает его в противоположном направлении. Вот простой анимированный пример, где квадрат продолжает вращаться на 360 градусов каждые три секунды:

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

Мы также можем использовать rotateX, rotateYи rotateZфункцию, например , так:

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

Переведите

.element ( transform: translate(20px, 10px); )

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

Эти значения могут быть любой длины, например 10px или 2.4em. Одно значение переместит элемент вправо (отрицательные значения влево). Если указано второе значение, это второе значение будет перемещать его вниз (отрицательные значения вверх). Или вы можете уточнить:

transform: translateX(value); transform: translateY(value);

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

См. Объяснение преобразования пера в CSS-Tricks (@ css-tricks) на CodePen.

Также стоит отметить, что translateесли вы захотите анимировать это свойство, будет аппаратное ускорение, в отличие от position: absolute.

Несколько значений

С помощью списка, разделенного пробелами, вы можете добавить к transformсвойству несколько значений :

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Стоит отметить, что есть порядок, в котором эти преобразования будут выполняться, в приведенном выше примере сначала будет выполнено `skew`, а затем элемент будет масштабирован.

Матрица

matrixФункция преобразования может быть использована для объединения всех преобразований в одно целое. Это немного похоже на сокращение, только я не верю, что оно действительно предназначено для написания от руки. Существуют такие инструменты, как The Matrix Resolutions, которые могут преобразовывать группу преобразований в одно объявление матрицы. Возможно, в некоторых ситуациях это может уменьшить размер файла, хотя такие недружелюбные к авторам микрооптимизации, вероятно, не стоят вашего времени.

Для любопытных это:

rotate(45deg) translate(24px, 25px)

также может быть представлен как:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

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

У большинства перечисленных выше свойств есть 3D-версии.

translate3d(x, y, z) translateZ(z)

Третье значение в translate3dили значение в translateZперемещает элемент к зрителю, отрицательные значения - в сторону.

scale3d(sx, sy, sz) scaleZ(sz)

Третье значение in scale3dили значение in scaleZвлияет на масштабирование по оси z (например, воображаемая линия, выходящая прямо из экрана).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXи rotateYбудет вращать элемент в трехмерном пространстве вокруг этих осей. rotate3dпозволяет указать точку в трехмерном пространстве, в которой нужно вращать элемент.

matrix3d(… )

Способ программного описания трехмерного преобразования в сетке 4 × 4. Никто и никогда не напишет от руки такое.

perspective(value)

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

Дополнительная информация

  • Документы MDN по преобразованию и использованию.
  • Документация Дэвида ДеСандро по 3D-преобразованиям
  • Surfin 'Safari: 3D-трансформации
  • Спецификация W3C по преобразованиям CSS3
  • Введение в 3D-преобразования CSS

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

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

Хром Сафари Fire Fox Опера IE Android iOS
Любой 3.1+ 3.5+ 10.5+ 9+ 4.1+ Не менее 4

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

Хром Сафари Fire Fox Опера IE Android iOS
10+ 4+ 12+ никто 10+ 4.1+ 5+

Префиксы поставщиков

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )