skew() в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53407bf4cac58f91 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Про CSS

Функции Transform

translateX(10px) — сдвиг по оси X. Значения в пикселях или процентах.

translateY(10px) — сдвиг по оси Y.

translate(25px, 30%) — сдвиг по осям X и Y. Если задано одно значение, оно используется как сдвиг по X, второе значение при этом равно 0.

scaleX(2) — масштабирование по оси X. При этом 1 — это 100%.

scaleY(2) — масштабирование по оси Y.

scale(.5, 2) — масштабирование по осям X и Y. Если второе значение не задано, оно будет равно первому.

rotate(10deg) — поворот на заданный угол. Значения задаются в градусах (deg). Центр поворота определяется свойством transform-origin .

skewX(20deg) — наклон по оси X. Значения задаются в градусах (deg).

skewY(20deg) — наклон по оси Y.

skew(5deg, -20deg) — наклон по осям X и Y. Если задано одно значение, второе будет равно 0.

matrix(w, sky, skx, h, mx, my)

Описывает трансформацию элемента в двухмерном пространстве. С помощью матрицы можно задать все предыдущие свойства сразу, кроме поворота.

w — изменение ширины. 1 — исходная ширина.

sky — наклон по вертикали. 0 — без наклона.

skx — наклон по горизонтали. 0 — без наклона.

h — изменение высоты. 1 — исходная высота.

mx — сдвиг по горизонтали.

my — сдвиг по вертикали.

Исходный код для элемента без трансформации:

Примеры матричных трансформаций:

translateX(20px) , translateY(15px) , translateZ(-10px) — сдвиг элемента по одной из осей.

translate3d(20px, 15px, -10px) — сдвиг элемента по трем осям сразу. Последовательность значений: X, Y, Z.

scaleX(2.5) , scaleY(.4) , scaleZ(1.7) — изменение масштаба по одной из осей.

scale3d(2.5, .4, 1.7) — изменение масштаба по трем осям сразу.

rotateX(30deg) или rotate3d(1, 0, 0, 30deg) — поворот по оси X.

rotateY(40deg) или rotate3d(0, 1, 0, 40deg) — поворот по оси Y.

rotateZ(50deg) или rotate3d(0, 0, 1, 50deg) — поворот по оси Z.

rotate3d(1, 1, 1, 90deg) — поворот по всем осям.

perspective(100px) — определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена по отношению к зрителю.

Значения матрицы мне не удалось выяснить до конца, кроме того, что первые три значения нижнего ряда отвечают за центр трансформации, а весь последний столбец — за перспективу. Причем первые три за перспективы по конкретным осям, а последняя — общая.

transform

Easily manage projects with monday.com

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

Even with a declared height and width, this element will now be scaled to twenty times its original size:

Giving this function two values will stretch it horizontally by the first and vertically by the second. In the example below the element will now be twice the width but half the height of the original element:

Or you can be more specific without using the shorthand function:

But scale() is just one of many transform functions that are available:

Values

  • scale() : affects the size of the element. This also applies to the font-size , padding , height , and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.
  • skewX() and skewY() : tilts an element to the left or right, like turning a rectangle into a parallelogram. There is no shorthand skew property.
  • translate() : moves an element sideways or up and down.
  • rotate() : rotates the element clockwise from its current position.
  • matrix() : a function that is probably not intended to be written by hand, but combines all transforms into one.
  • perspective() : doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them all to have a consistent depth perspective.


The skewX and skewY transform functions tilt an element one way or the other. Remember: there is no shorthand property for skewing an element, so you’ll need to use both functions. In the example below, we can skew a 100px x 100px square to the left and right with skewX :

Whilst in this example we can skew an element vertically with with skewY :

Rotate

This rotates an element clockwise from its original position, whilst a negative value would rotate it in the opposite direction. Here’s a simple animated example where a square continues to rotate 360 degrees every three seconds:

We can also use the rotateX , rotateY and rotateZ functions, like so:

Translate

This transform function moves an element sideways, or up and down. Why not just use top/left/bottom/right? Well, it’s a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.

These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or, you can get specific:

It’s important to note that an element using transform will not cause other elements to flow around it. By using the translate function below and nudging the green square out of its original position, we’ll notice how the surrounding text will remain fixed in place, as if the square is a block element:

Илон Маск рекомендует:  animation-fill-mode в CSS

It’s also worth noting that translate will be hardware accelerated if you want to animate that property, unlike position: absolute .

Multiple values

With a space-separated list you can add multiple values to the transform property:

It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

Matrix

The matrix transform function can be used to combine all transforms into one. It’s a bit like transform shorthand, only I don’t believe it’s really intended to be written by hand. There are tools out there like The Matrix Resolutions, which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likely not worth your time.

For the curious, this:

can also be represented as:

3D Transforms

Most of the above properties have 3D versions of them.

The third value in translate3d or the value in translateZ moves the element toward the viewer, negative values away.

The third value in scale3d or the value in scaleZ affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).

rotateX and rotateY will rotate an element in 3D space around those axises. rotate3d allows you to specify a point in 3D space in which to rotate the element around.

A way to programmatically describe a 3D transform in a 4×4 grid. Nobody will ever hand write one of these, ever.

This value doesn’t affect the element itself, but it affects the transforms of descendent elements’ 3D transforms, allowing them to all have a consistent depth perspective.

Transform CSS Generator: Scale, Rotate, Translate and Skew

Use the sliders to set the transform CSS properties for your stylesheet.

Set the scale, rotate, translate, and skew and watch the live preview to get the desired view.
Avoid setting extreme values for the skew property because the preview might cover the settings panel. In this situation you will have to refresh the page.

Scale, Rotate, Translate and Skew

Scale works like you would zoom in and out the targeted element. The default scale value is 1, which works as a multiplier of the original size. This means that 0.5 halves while 2 doubles the section.

Rotate the element clockwise with the second property that’s set in degrees. Turning with 180° puts the object upside down while 360° takes is back to its original upright position. Set any positive or negative value or even decimals.

Translate shifts the element with pixels related to its original position. The X value horizontally while Y vertically when there rotate attribute is zero.

Skew the objects on their horizontal (X) or vertical (Y) axle.

Gradient Generator

Pick the colors and
set the gradient type.

Table Styler

Generate HTML and CSS
for tables and div grids.

Border & Outline

Style the line surrounding
the elements in your doc.

Box Shadow

Generate box-shadow
with the desired options.

transform css

transform: scale(2, 2);

transform: skew(-30deg, -20deg);

transform: translate(40px, -40px);

Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я. БЕССМЕРТНЫЙ ПОНИ!

16 комментариев:

NMitra Про запятые думаю понятно — задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью. NMitra Посмотрите эту статью http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей — это китайская грамота. Космо Мизраил Горыныч Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span <. >
div -> span работает, а вот
div -> p -> span — не работает.

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

Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика :)
также знак

используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title

CSS skew() Function


The CSS skew() function is used to skew elements in a two-dimensional space.

The skew() element performs a shear transformation (also known as a shear mapping or a transvection), which displaces each point of an element by a given angle in each direction.

Skewing an element is kind of like taking the points of an element, and pushing or pulling them in different directions, based on a given angle.

The skew() function works like this:

The skew() function accepts two arguments, indicating the angle of the skew for the x and y axes respectively. These are represented by angle values.

If only one value is supplied, the second value has a zero value.

Skew along the x -axis

Here’s an example of using skew() to skew an element along the x -axis.

Skew along the y -axis

Here’s an example of using skew() to skew an element along the y -axis.

Skew along Both Axes

Here’s an example of using skew() to skew an element along both the x -axis and the y -axis.

Negative Values

You can also provide negative values if required.

Removing transform-origin

In the previous examples, I use transform-origin to adjust the origin of the transformation.

This is optional, so you can leave it out if required (or change the value).

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here’s an example of what the previous example looks like when using the default transform-origin value.

Official Syntax

The official syntax of the skew() function is as follows:

Possible Values

The skew() function accepts angle parameters that define the angle of the skew operation.

The angle can be represented with any of the following unit identifiers:

Degrees. There are 360 degrees in a full circle. Gradians, also known as «gons» or «grades» (although these aren’t valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle. Radians. There are 2Ï€ radians in a full circle. Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both skew(0deg) and skew(0) are valid (but skew(45) is not).

CSS свойство transform

Определение и применение

CSS свойство transform применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). Допускается перечислять несколько функций в одном объявлении (разделённые пробелом).

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
transform (2D) 36.0
4.0
-webkit-
16.0
3.5
-moz-
23.0*
11.5 -o-
15.0 -webkit-
9.0
3.2
-webkit-
10.0
9.0
-ms-
12.0
transform (3D) 36.0
12.0
-webkit-
16.0
10.0
-moz-
23.0
15.0
-webkit-
9.0
3.2
-webkit-
10.0 12.0

Значения свойства

Значение Описание
none Указывает, что к элементу не применяется никакой трансформации. Это значение по умолчанию.
matrix(n,n,n,n,n,n) Определяет двухмерное преобразование с помощью матрицы из шести значений.

Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Определяет трехмерное преобразование с помощью матрицы 4×4 из шестнадцати значений в порядке столбцов. Все другие трехмерные функции преобразований основаны на функции matrix3d . Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. translate(x,y) Определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси x и y(отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз). Элемент, к которому применяется сдвиг не влияет на поток документа. translate3d(x,y,z) Задает трехмерное преобразование путем сдвига элемента, используя координаты трёх осей. translateX(x) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси x. translateY(y) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси y. translateZ(z) Определяет трехмерное преобразование путем сдвига элемента, используя только значение по оси z. scale(x,y) Определяет двухмерное преобразование путем масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси x, так и по y). Другими словами, значения больше одного при масштабировании увеличивают элемент, меньше одного — уменьшают. При использовании отрицательных значений элемент отображается зеркально. Масштабируемый элемент увеличивается, либо уменьшается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). scale3d(x,y,z) Определяет трехмерное преобразование путем масштабирования элемента по оси x, y и по оси z. scaleX(x) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси x. scaleY(y) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси y. scaleZ(z) Определяет трехмерное преобразование путем масштабирования элемента, используя только значение по оси z. rotate(angle) Задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ).

Допускается указывать значения угла в следующих единицах:

  • deg — градусы. Оборот окружности составляет 360deg.
  • grad — грады. Оборот окружности составляет 400grad.
  • rad — радианы. Оборот окружности составляет 2π (

6.28rad).

  • turn — обороты. Оборот окружности составляет 1turn.
  • Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно

    1.57rad. rotate3d(x,y,z,angle) Задает трехмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (x, y, z), а последний параметр определяет на сколько градусов. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов). Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X и на (50 * 1 / 2) градусов вокруг Y. rotateX(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси x. rotateY(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси y. rotateZ(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси z. skew(x-angle,y-angle) Определяет двухмерное преобразование путем наклона элемента относительно осей x и y. Допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси x. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). При использовании отрицательных значений элемент будет наклоняться зеркально. skewX(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси x. skewY(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси y. perspective(n) Определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. initial Устанавливает свойство в значение по умолчанию. inherit Указывает, что значение наследуется от родительского элемента.

    Версия CSS

    Наследуется

    Анимируемое

    Пример использования

    Рассмотрим примеры двухмерных преобразований (трансформаций) в CSS:

    Пример использования CSS свойства transform(двухмерная трансформация в CSS).

    Рассмотрим примеры трехмерных преобразований (трансформаций) в CSS:

    Пример использования CSS свойства transform(трехмерная трансформация в CSS).

    Рассмотрим пример изменения двухмерного поворота элемента, используя CSS свойство transform , HTML атрибута событий onchange и функции на JavaScript:

    Пример использования CSS свойства transform(двухмерный поворот элемента в CSS). CSS свойства

    Трансформации

    Стажировка HTML5

    Дмитрий Мещеряков

    2D трансформации


    Свойство transform

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

    • поддержка трансформаций: IE9+;
    • нужны вендорные префиксы для IE9, Safari 8-, Android;
    • значение по умолчанию: transform: none;

    Допустимые функции трансформации:

    • перемещение элемента: translate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %;
    • масштабирование элемента: scale(), scaleX(), scaleY() — любое число;
    • вращение элемента: rotate() — угол (deg, grad, rad или turn);
    • искажение элемента: skew(), skewX(), skewY() — угол (deg, grad, rad).

    Перемещение элемента

    Свойство transform: translate();

    Перемещает элемент относительно его текущего местоположения.

    Примеры

    Перемещение элемента

    Центрирование при помощи transform: translate()

    При помощи свойства transform: translate(); можно отцентрировать элемент по горизонтали, по вертикали или одновременно по горизонтали и по вертикали.

    Масштабирование элемента

    Свойство transform: scale();

    Масштабирует элемент по ширине, делая его шире или уже. Если указано отрицательное значение, то элемент отображается зеркально.

    Примеры

    Масштабирование элемента

    Вращение элемента

    Свойство transform: rotate();

    Поворачивает элемент на указанное количество градусов; положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

    Примеры

    Вращение элемента

    Поворот на 360 градусов

    Поворот на 720 градусов

    Искажение элемента

    Свойство transform: skew();

    Используется для искажения сторон элемента относительно координатных осей.

    Примеры

    Искажение элемента

    Точка трансформации

    Свойство transform-origin;

    Позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%.

    В качестве значений могут использоваться любые единицы измерения длины (px, em, rem, %, ключевые слова top, bottom, left, right).

    Примеры

    Точка трансформации

    Искажение элемента без искажения текста

    По умолчанию все функции трансформации применяются ко всему элементу, включая текст. Но, как правило, нужно, чтобы трансформации подвергался только фон элемента, а текст оставался прежним. Ниже представлен один из способов как сделать трансформацию искажения элемента, не затронув при этом текстовое содержание.

    See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    See the Pen [transformations] — text without skew by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    Множественные трансформации

    Способ 1. Значения через пробел

    Множественные трансформации

    Способ 2. Значения через функцию matrix()

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

    Матрица преобразований имеет размер 3х3 и в общем виде записывается так:

    Мы можем записать это при помощи ключевого слова matrix в свойстве transform:

    Буквы от a до f — числа, определяемые типом трансформации. Матрицы — это рецепты тех видов трансформации, которые мы хотим применить.

    Когда мы применяем двумерную трансформацию, браузер умножает матрицу на вектор [x, y, 1]. Значения X и Y — координаты конкретной точки блока, к которому применяется трансформация.


    Функция matrix()

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

    Функция matrix()

    У каждого типа трансформаций — своя собственная матрица. Например, так выглядит матрица для трансформации сдвига:

    Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Этот вектор служит аргументом для функции matrix():

    Функция matrix()

    Так выглядят матрицы преобразований для разных видов трансформации:

    Функция matrix()

    Для вычисления составных трансформаций используется перемножение соответствующих матриц преобразований. Например, если нужно повернуть элемент на 45 градусов и увеличить его в 1.5 раза, то нужно умножить две матрицы:

    Пример составной трансформации при помощи функции matrix()

    Пример составной трансформации при помощи функции matrix()

    See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    See the Pen [transformations] — matrix() by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    Новый контекст наложения

    Блок, к которому применяется transform , создает новый контекст наложения, ведет себя так, как если к нему применить position: relative . Поэтому дочерние элементы с position: absolute будут позиционироваться относительно этого родительского элемента с трансформацией.

    Фиксированные ( position: fixed ) элементы внутри блока, к которому применяется transform, будут вести себя как элементы с position: absolute. Т.е. они будут позиционироваться относительно родитеского элемента с трансформацией, их можно «проскроллить», будто они не фиксированные.

    3D трансформации

    3D трансформации создают объемные реалистичные эффекты на веб-страницах.

    3D трансформации работают аналогично с 2D трансформациями с разницей в том, что элементы могут перемещаться вдоль оси Z, вглубь экрана и из него.

    • поддержка 3D трансформаций: IE10+;
    • для активации 3D пространства нужно установить свойство perspective для родительского контейнера;
    • допустимые 3D трансформации: translate(), scale(), rotate(), matrix().

    Установка 3D-перспективы

    Свойство perspective (задает глубину просмотра, т.е. расстояние по оси Z между z=0 и пользователем)

    Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform. 0 (как и none) означает отсутствие перспективы.

    Задание точки трансформации

    Свойство perspective-origin (аналогично transform-origin)

    Стиль 3D-преобразований

    Свойство transform-style (не поддерживается во всех IE)

    Определяет, как вложенные элементы отрисовываются в трехмерном пространстве:

    • flat — значение по умолчанию. Все дочерние элементы отображаются плоскими в двухмерной плоскости блока-контейнера;
    • preserve-3d — располагает элементы в трехмерном пространстве.

    Стиль 3D-преобразований

    See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    See the Pen [transformations] — transform-style by HTML Five Noveo Software University (@HTML5-Noveo-SU) on CodePen.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Cloudflare Ray ID: 53407c263a588f91 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    transform

    Easily manage projects with monday.com

    The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

    Even with a declared height and width, this element will now be scaled to twenty times its original size:

    Giving this function two values will stretch it horizontally by the first and vertically by the second. In the example below the element will now be twice the width but half the height of the original element:

    Or you can be more specific without using the shorthand function:

    But scale() is just one of many transform functions that are available:

    Values

    • scale() : affects the size of the element. This also applies to the font-size , padding , height , and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.
    • skewX() and skewY() : tilts an element to the left or right, like turning a rectangle into a parallelogram. There is no shorthand skew property.
    • translate() : moves an element sideways or up and down.
    • rotate() : rotates the element clockwise from its current position.
    • matrix() : a function that is probably not intended to be written by hand, but combines all transforms into one.
    • perspective() : doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them all to have a consistent depth perspective.

    The skewX and skewY transform functions tilt an element one way or the other. Remember: there is no shorthand property for skewing an element, so you’ll need to use both functions. In the example below, we can skew a 100px x 100px square to the left and right with skewX :

    Whilst in this example we can skew an element vertically with with skewY :

    Rotate

    This rotates an element clockwise from its original position, whilst a negative value would rotate it in the opposite direction. Here’s a simple animated example where a square continues to rotate 360 degrees every three seconds:

    We can also use the rotateX , rotateY and rotateZ functions, like so:

    Translate

    This transform function moves an element sideways, or up and down. Why not just use top/left/bottom/right? Well, it’s a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.

    These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or, you can get specific:

    It’s important to note that an element using transform will not cause other elements to flow around it. By using the translate function below and nudging the green square out of its original position, we’ll notice how the surrounding text will remain fixed in place, as if the square is a block element:

    It’s also worth noting that translate will be hardware accelerated if you want to animate that property, unlike position: absolute .

    Multiple values

    With a space-separated list you can add multiple values to the transform property:

    It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

    Matrix

    The matrix transform function can be used to combine all transforms into one. It’s a bit like transform shorthand, only I don’t believe it’s really intended to be written by hand. There are tools out there like The Matrix Resolutions, which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likely not worth your time.

    For the curious, this:

    can also be represented as:

    3D Transforms

    Most of the above properties have 3D versions of them.

    The third value in translate3d or the value in translateZ moves the element toward the viewer, negative values away.

    The third value in scale3d or the value in scaleZ affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).

    rotateX and rotateY will rotate an element in 3D space around those axises. rotate3d allows you to specify a point in 3D space in which to rotate the element around.

    A way to programmatically describe a 3D transform in a 4×4 grid. Nobody will ever hand write one of these, ever.

    This value doesn’t affect the element itself, but it affects the transforms of descendent elements’ 3D transforms, allowing them to all have a consistent depth perspective.

    Илон Маск рекомендует:  Тег bgsound
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL