В моей предыдущей статье мы обнаружили, что преобразования применяются с использованием свойства transform
-webkit-transform: function(values);
transform: function(values);
В этой статье мы обсудим все 2D функции.
перевести, перевестиX и перевестиY
Функция translate Он принимает значения x и y, которые могут быть любой типичной длины CSS (px, em,% и т. Д.):
transform: translate(-200%, 100px);
Посмотрите демонстрационную страницу преобразования трансляций …
В этом примере элемент перемещается на 200% влево и на 100 пикселей вниз. Процент основан на исходном размере коробки, поэтому 200% представляет двойную ширину.
Если вы хотите двигаться только в одном направлении, вы можете использовать translateXtranslateY
Теперь вы, вероятно, думаете, что это свойство не имеет смысла — в конце концов, мы могли бы перемещать элементы в CSS2.1, используя поля или абсолютные значения позиционирования. Однако это может пригодиться. Например, предположим, что вы центрировали элемент, используя margin: 0 auto; , Переместить этот элемент на 20 пикселей влево было бы сложно, если бы вы не знали точные размеры контейнера — но с translate
шкала, шкала X и шкала Y
scale Можно передать один параметр, который представляет масштабирование в обоих направлениях, например, сделать элемент в два раза больше:
transform: scale(2);
Или мы можем передать два параметра, которые масштабируют элемент по горизонтали и вертикали, например, сделать элемент наполовину шириной, но в два раза больше высоты:
transform: scale(0.5, 2);
В качестве альтернативы, вы можете использовать scaleXscaleY
Менее известно, что любое измерение может принимать отрицательное значение, которое создает зеркальное отображение элемента. Например, горизонтальное отражение, которое на 150% выше:
transform: scale(-1, 1.5);
Посмотрите демонстрационную страницу преобразования масштаба …
поворот
Как и следовало ожидать, rotate
transform: rotate(30deg);
Просмотрите страницу демонстрации поворота …
Положительное значение вращается по часовой стрелке, а отрицательное — против часовой стрелки. Элемент вращается вокруг своего центра, хотя вы можете изменить поведение, используя свойство transform-origin-webkit-transform-origin
/* rotate around top-left of element */
transform-origin: left top;
skewX и skewY
skewXskewY (Обратите внимание, что одна функция skew
transform: skewX(-10deg);
Посмотрите демонстрационную страницу преобразования skewX …
Многократные Преобразования
Несколько функций преобразования могут быть переданы свойству transform
transform: rotate(-20deg) skewX(-10deg) scale(0.8);
Посмотреть страницу демонстрации нескольких преобразований …
Если вы хардкорный математик, вы также можете применять преобразования, используя матричную функцию. Это принимает шесть параметров; четыре для матрицы преобразования, за которыми следуют два для масштабирования размеров, например
transform: matrix(1.2,0.2,0.15,1,-50,10);
Матрица применяется к каждой точке, чтобы определить новую форму и местоположение. Если вы не манипулируете значениями с помощью JavaScript, я предлагаю использовать несколько значений; их намного легче читать.
Отключение трансформаций
Наконец, если вы хотите отключить все преобразования, примененные к элементу, просто используйте функцию none
transform: none;
Работать с преобразованиями в двух измерениях легко. На следующем уроке мы перейдем к 3D…