skewX() в 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: 53407c485e908de7 • 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) — определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена по отношению к зрителю.

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

Свойство CSS transform

Свойство CSS transform (от слова «трансформация») позволяет видоизменять элемент на html-страницах. Например, можно

  • вращать
  • смещать
  • изменять масштаб
  • наклонять
  • комбинировать выше описанные действия

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

1. Синтаксис CSS transform

Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Примечание про браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

  • -ms-transform — для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform — для Chrome, Safari, Andro >-o-transform — для Opera до версии 12.10
  • -moz-transform — для Firefox до версии 16.0

2. transform:rotate(x) — вращение объекта

Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

На странице преобразуется в следующее

Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) — смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках — смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) — смещение по Х, translateY(y) — смещение У.

4. transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

5. transform:skew — наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках — наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) — наклон по Х, skewY(y) — наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование ( scale ), вращение ( rotate ) и перемещения ( translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

  • none — отсутствие преобразований (по умолчанию включено оно);
  • matrix(x,x,x,x,x,x) — преобразование 2D с помощью матрицы из 6 значений;
  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) — преобразование 3D с помощью матрицы из 16 значений;
  • translate3d(x,y,z) — перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
  • scale3d(x,y,z) — масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
  • rotate3d(x,y,z) — вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
  • rotateX(x) — 3d вращение по оси X;
  • rotateY(x) — 3d вращение по оси Y;
  • rotateZ(x) — 3d вращение по оси Z;
  • perspective(n) — перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

Возможно, вы зададите вопрос «а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?» Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

CSS transform Свойство

Пример

Поворот, наклон и масштабирование трех различных элементов

div.b <
transform: skewY(20deg);
>

div.c <
transform: scaleY(1.5);
>

Определение и использование

Свойство transform применяет 2D или 3D преобразование к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклона и т.д., элементы.

Чтобы лучше понять свойство Transform, Просмотрите демонстрацию.

Илон Маск рекомендует:  background-blend-mode в CSS
Значение по умолчанию: none
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.transform=»rotate(7deg)»

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

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

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
transform (2D) 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-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 9.0
4.0 -webkit-
23.0
15.0 -webkit-

Синтаксис

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

Значение Описание
none Определяет, что не должно быть преобразования
matrix(n,n,n,n,n,n) Определяет 2D преобразование, используя матрицу из шести значений
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Определение трехмерного преобразования с использованием матрицы 4×4 из 16 значений
translate(x,y) Определяет 2D перевод
translate3d(x,y,z) Определяет трехмерный перевод
translateX(x) Определяет перевод, используя только значение для оси X
translateY(y) Определяет перевод, используя только значение для оси Y
translateZ(z) Определяет трехмерный перевод, используя только значение для оси Z
scale(x,y) Определяет преобразование 2D масштаба
scale3d(x,y,z) Определяет преобразование трехмерного масштаба
scaleX(x) Определяет преобразование масштаба, предоставляя значение для оси X
scaleY(y) Определяет преобразование масштаба путем предоставления значения для оси Y
scaleZ(z) Определение преобразования трехмерного масштаба путем предоставления значения для оси Z
rotate(angle) Определяет 2D вращение, угол задается в параметре
rotate3d(x,y,z,angle) Определяет 3D вращение
rotateX(angle) Определение 3D вращения вдоль оси X
rotateY(angle) Определение 3D вращения вдоль оси Y
rotateZ(angle) Определение 3D вращения вдоль оси Z
skew(x-angle,y-angle) Определяет преобразование 2D наклона вдоль оси X и Y
skewX(angle) Определяет преобразование 2D наклона вдоль оси X
skewY(angle) Определяет преобразование 2D наклона вдоль оси Y
perspective(n) Определение вида перспективы для 3D преобразованного элемента
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков.

skewX() CSS3 Property

I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.

The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.

One solution I’ve tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven’t included the accordian as this isn’t necessary to the solution.

1 Answer 1

You can apply an inverted skewX on img :

To make the div contain the image properly, you also need to add overflow: hidden .

CSS 2D Transforms

CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements.

Mouse over the element below to see a 2D transformation:

In this chapter you will learn about the following CSS property:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
transform 36.0 10.0 16.0 9.0 23.0

Browser Specific Prefixes

Some older browsers need specific prefixes (-ms- or -webkit-) to understand the 2D transform properties:

Example

CSS 2D Transforms Methods

With the CSS transform property you can use the following 2D transformation methods:

Tip: You will learn about 3D transformations in the next chapter.

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the

Example

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the

Example

Using negative values will rotate the element counter-clockwise.

The following example rotates the

Example

The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

The following example increases the

Example

The following example decreases the

Example

The scaleX() Method

The scaleX() method increases or decreases the width of an element.

The following example increases the

Example

The following example decreases the

Example

The scaleY() Method

The scaleY() method increases or decreases the height of an element.

The following example increases the

Example

The following example decreases the

Example

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The following example skews the

Example

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the

Example

The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

The following example skews the

Example

If the second parameter is not specified, it has a zero value. So, the following example skews the

Example

The matrix() Method

The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Example

Test Yourself with Exercises!

CSS Transform Properties

The following table lists all the 2D transform properties:

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.

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

Стажировка 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().
Илон Маск рекомендует:  Меню в стиле windows xp

Установка 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.

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.

CSS :: Трансформация

Трансформация элемента и свойство transform

Трансформация элементов в CSS представляет собой возможность сдвигать, поворачивать, масштабировать, а также наклонять (деформация сдвига) элементы. При этом существует два вида css -трансформаций: 2D -трансформации на плоскости и 3D -трансформации в пространстве. Осуществляются такие трансформации при помощи анимируемого ненаследуемого css -свойства transform, которое в качестве значений принимает ряд специальных функций, как раз и позволяющих трансформировать элементы должным образом. Перечислим эти функции:

  • translate() – сдвигает элемент на плоскости вдоль осей X и Y ;
  • translateX() – сдвигает элемент вдоль оси X ;
  • translateY() – сдвигает элемент вдоль оси Y ;
  • translateZ() – сдвигает элемент вдоль оси Z ;
  • translate3d() – сдвигает элемент в трехмерном пространстве;
  • scale() – масштабирует элемент на плоскости;
  • scaleX() – масштабирует элемент вдоль оси X ;
  • scaleY() – масштабирует элемент вдоль оси Y ;
  • scaleZ() – масштабирует элемент вдоль оси Z ;
  • scale3d() – масштабирует элемент в трехмерном пространстве;
  • rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin ;
  • rotateX() – поворачивает элемент на требуемый угол относительно оси X ;
  • rotateY() – поворачивает элемент на требуемый угол относительно оси Y ;
  • rotateZ() – поворачивает элемент на требуемый угол относительно оси Z ;
  • rotate3d() – поворачивает элемент в трехмерном пространстве;
  • skew() – наклоняет элемент на заданный угол на плоскости;
  • skewX() – наклоняет элемент вдоль оси X ;
  • skewY() – наклоняет элемент вдоль оси Y ;
  • matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
  • matrix3d() – задает трехмерную матрицу преобразований;
  • perspective() – задает перспективу (глубину сцены);
  • none – отменяет эффекты трансформации для данного элемента.

Если необходимо применить к элементу сразу несколько трансформаций, то свойству transform разрешается передавать требуемое количество функций, перечисляя их через пробел (см. примеры ниже). При этом важно помнить, что порядок перечисления функций имеет значение, т.к. трансформации будут выполняться последовательно.

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

Функция трансформации translate()

Функция трансформации translate() позволяет сдвигать элемент на плоскости вдоль осей X и Y . В качестве параметров функция может принимать два значения в виде любых допустимых в CSS единиц измерения длины, как положительных, так и отрицательных. Первое значение смещает элемент в горизонтальном направлении вдоль оси X (если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево), а второе предназначено для смещения в вертикальном положении вдоль оси Y (если значение больше нуля, то элемент сдвигается вниз, а если отрицательное, то вверх). Второе значение разрешается не указывать, тогда трансформируемый элемент будет сдвигаться только в горизонтальном направлении вдоль оси X (см. пример №1).

Пример №1. Функция трансформации translate()

Функция трансформации scale()

Функция трансформации scale() дает возможность масштабирования элемента на плоскости, принимая в качестве параметров два числа, первое из которых масштабирует элемент в горизонтальном направлении, а второе — по вертикали. Значение параметра большее единицы (например, 1.7 ), приводит к увеличению масштаба элемента, меньшее единицы (например, 0.8 ) — к уменьшению масштаба. Если же значение еще и меньше нуля, то элемент не только масштабируется, но также и зеркально отражается относительно соответствующей оси (см. пример №2). Отметим, что значение параметра равное единице не изменяет масштаб элемента.

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

Пример №2. Функция трансформации scale()

Функция трансформации rotate()

Функция трансформации rotate() позволяет поворачивать элемент на плоскости вокруг точки трансформации на требуемый угол (см. пример №3). Точка трансформации по умолчанию располагается в центре элемента и может быть изменена при помощи свойства transform-origin (см. ниже). В качестве значений функция rotate() принимает все доступные в CSS единицы измерения углов: градусы (например, rotate(30deg) ), грады (например, rotate(100grad) ), радианы (например, rotate(-3.15rad) ) или же просто обороты (например, rotate(2.5turn) ). При этом положительные значения угла приводят к повороту элемента по часовой стрелке, отрицательные — против.

Пример №3. Функция трансформации rotate()

Функция трансформации skew()

Функция трансформации skew() используется для наклона (деформации сдвига) элемента на плоскости вдоль осей X и Y , принимая в качестве параметров значения углов: первое значение задает угол наклона элемента в горизонтальном направлении (если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо), второе значение задает угол наклона элемента по вертикали (если значение больше нуля, то элемент наклоняется вниз, а если отрицательное, то вверх). Опять же, разрешается использовать любые доступные в CSS единицы измерения углов: градусы, грады, радианы или же просто обороты (например, skew(2.5turn, -30deg) ). При этом вместо нулевых значений допустимо использовать просто нуль, а второе значение можно не указывать вообще, тогда трансформируемый элемент будет наклоняться только в горизонтальном направлении вдоль оси X (см. пример №4).

Пример №4. Функция трансформации skew()

Функция трансформации matrix()

Функция трансформации matrix() позволяет трансформировать элементы, совмещая в себе возможности сразу нескольких функций трансформации (см. пример №5). В качестве параметров она принимает через запятую шесть значений:

  • scaleX – изменяет масштаб элемента по горизонтали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси X , больше 1 — увеличивает (расширяет) его;
  • skewY – наклоняет элемент по вертикали (сдвиг вертикальных сторон элемента друг относительно друга вдоль оси Y ): если значение больше нуля, то элемент наклоняется вверх, а если отрицательное, то вниз;
  • skewX – наклоняет элемент по горизонтали (сдвиг горизонтальных сторон элемента друг относительно друга вдоль оси X ): если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо;
  • scaleY – изменяет масштаб элемента по вертикали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси Y , больше 1 — увеличивает (расширяет) его;
  • translateX – смещает элемент на указанное число пикселей по горизонтали: если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево;
  • translateY – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).
Илон Маск рекомендует:  Предопределённые константы hyperwave

Пример №5. Функция трансформации matrix()

Функция perspective()

Рассмотренные выше примеры функций позволяют трансформировать элементы на плоскости. Однако в CSS имеются возможности осуществлять и 3D -трансформации, добавляя третье измерение к веб-страницам.

Одной из таких возможностей является функция perspective() , которая задает глубину просмотра ( 3d -перспективу), т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).

Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z) , где d (значение перспективы) — это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z — координата желаемого расположения плоскости элемента на оси Z , направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2 ). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2 ).

В качестве параметра функция perspective() принимает любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение, тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю). Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z .

Пример №7. Функция трансформации perspective()

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

css-свойство perspective

Когда 3D -перспектива задается с помощью функции perspective() , 3D -пространство активируется только для одного элемента. Если же требуется обеспечить одинаковую перспективу для всех дочерних элементов родителя, то можно использовать специальное ненаследуемое css -свойство perspective, которое активирует 3D -пространство внутри элемента-родителя и будет применено ко всем дочерним элементам сразу. В результате такой манипуляции отпадает необходимость использовать функцию для каждого дочернего элемента. При этом в случае необходимости для конкретных элементов всегда можно будет использовать функцию perspective() , переопределив значение свойства (см. пример №8).

Что касается значений, то свойство perspective может принимать:

  • длина – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот; отрицательные значения и нуль отменяют действие перспективы;
  • none – отменяет действие перспективы (используется по умолчанию).

Пример №8. Использование css-свойства perspective

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

css-свойство perspective-origin

По умолчанию точка сходимости линий (т.е. точка расположения глаз зрителя при взгляде на экран) при использовании свойства perspective находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рис. №9). Однако эту точку можно смещать, изменяя ее координаты X и Y . Делается это при помощи ненаследуемого css -свойства perspective-origin, которое должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Рис. №9. Пример смещения точки сходимости линий при использовании перспективы

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий (см. пример №10). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X , а для координаты Y будет использовано значение по умолчанию.

Пример №10. Пример использования css-свойства perspective-origin

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

css-свойство transform-origin

С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались. Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой центром (точкой) трансформации. По умолчанию трансформация элемента происходит относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см. рис №11). Однако эту точку можно смещать, изменяя ее координаты X , Y и Z (координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css -свойства transform-origin, которое используется совместно с transform.

Рис. №11. Расположение центра трансформации по умолчанию

В качестве значений transform-origin принимает через пробел координаты X , Y и Z центра трансформации (см. пример №12). Для них разрешается использовать:

  • для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50% ), а также ключевые слова left (эквивалентно 0% по оси X ), center (эквивалентно 50% по оси X ) или right (эквивалентно 100% по оси X );
  • для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50% ), а также ключевые слова top (эквивалентно 0% по оси Y ), center (эквивалентно 50% по оси Y ) или bottom (эквивалентно 100% по оси Y ).
  • для координаты Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству transform-origin только одно значение, то оно будет считаться координатой X , если два, то X и Y (соответственно неуказанные координаты примут значения по умолчанию).

Пример №12. Пример использования css-свойства transform-origin

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

css-свойство transform-style

Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D -трансформациям. Но если мы попробуем применить к дочерним элементам 3D -трансформации, то результат нас не очень обрадует, т.к. точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали (см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного 3D -пространства в CSS предусмотрено ненаследуемое свойство transform-style, которое применяется к родительскому контейнеру и определяет, как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство transform) будут отображаться в 3D -пространстве:

  • flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
  • preserve-3d – будут трансформироваться в своем собственном 3D -пространстве.

Пример №13. Пример использования css-свойства transform-style

Итак, в примере выше у нас имеется обычный общий ‘div’ (темно-серый фон), в котором расположены два других ‘div’ , которые подвергаются идентичной трансформации поворота вокруг оси X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D -трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D -трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D -пространство при помощи класса three_d .

Обязательно поэкспериментируйте с данным примером, попробовав, например, применить к абзацам трансформацию поворота вокруг оси Z (разницы видно не будет, т.к. такая трансформация будет происходить в плоскости родительского элемента).

css-свойство backface-visibility

Когда в результате трансформации элемента (например, поворота вокруг оси X ) он поворачивается к нам обратной стороной, его обратная сторона по умолчанию остается видимой пользователю и отображается зеркально (см. пример №14). Однако такое поведение можно легко изменить при помощи ненаследуемого css -свойства backface-visibility, которое определяет, будет показываться обратная сторона элемента или нет. В качестве значений свойство принимает два ключевых слова:

  • visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию);
  • hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).

Пример №14. Пример использования css-свойства backface-visibility

В примере выше второй элемент не отображается, т.к. он больше не просвечивается. Это может быть полезно, когда нужно создать для пользователя впечатление того, что у элемента имеется более одной стороны. Например, чтобы создать игральную карту, можно взять два одинаковых по размеру фоновых изображения, применить к ним соответствующую трансформацию поворота и установить для backface-visibility значение visible . При повороте на угол более, чем девяноста градусов, одно изображение станет невидимым, а второе наоборот. Этот и другие примеры использования трансформаций в анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

Пару слов о 3D-функциях трансформации

В конце хотелось бы сказать пару слов о перечисленных вначале страницы 3D -функциях translate3d() , scale3d() , rotate3d() и matrix3d() . Их использование предусматривает некоторое знание математики и матриц, что подходит далеко не каждому верстальщику. Поэтому в большинстве случаев о них можно смело забыть и в случаях, когда требуется трансформация элемента вдоль оси Z , пользоваться более простыми функциями translateZ() , scaleZ() и rotateZ() . Тоже самое касается трехмерных трансформаций и вдоль других осей.

Далее, следует обратить внимание на то, что в списке отсутствуют функции skewZ() и skew3d() . Это связано с тем, что skew — единственная трансформация, которую допускается осуществлять только на плоскости (деформация сдвига вдоль оси Z не разрешается).

Несмотря на то, что CSS позволяет нам преобразовывать двумерные html -элементы в трехмерном пространстве добавляя чувство глубины в сцену, сами элементы все равно остаются плоскими. Поэтому сделать из квадрата куб никак не получится, для этого потребуется целых шесть отдельных элементов по одному для каждой стороны. Тем не менее, если говорить о создании красивых 3D -эффектов на страницах сайтов, то возможностей CSS для этого вполне достаточно.

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