turn в CSS


Содержание

CSS3 — трансформации

Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

Поворот

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

В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

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

Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

Единицы измерения угла поворота CSS3-трансформации

Единица измерения CSS3-обозначение Описание Пример
Градусы deg Угол полной окружности 360° rotate(90deg)
Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

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

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

Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

Более того, функцию scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). Давайте рассмотрим некоторые примеры масштабирования. Для начала уменьшим нашу картинку с текстом в два раза:

Теперь растянем элемент в два раза по оси X:

Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

Перемещение

Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

Искажение

Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

Использование нескольких трансформаций

Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

CSS transform Свойство

Пример

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

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

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

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

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

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

Значение по умолчанию: 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» и поворот рисунков.

Илон Маск рекомендует:  Что такое код readline_write_history

CSS transform Property

Example

Rotate, skew, and scale three different

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

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

Definition and Usage

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

To better understand the transform property, view a demo.

Default value: none
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.transform=»rotate(7deg)» Try it

Browser Support

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

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
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-

Syntax

Property Values

Value Description Play it
none Defines that there should be no transformation Play it »
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values Play it »
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4×4 matrix of 16 values
translate(x,y) Defines a 2D translation Play it »
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis Play it »
translateY(y) Defines a translation, using only the value for the Y-axis Play it »
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation Play it »
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis Play it »
scaleY(y) Defines a scale transformation by giving a value for the Y-axis Play it »
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter Play it »
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis Play it »
rotateY(angle) Defines a 3D rotation along the Y-axis Play it »
rotateZ(angle) Defines a 3D rotation along the Z-axis Play it »
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis Play it »
skewX(angle) Defines a 2D skew transformation along the X-axis Play it »
skewY(angle) Defines a 2D skew transformation along the Y-axis Play it »
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Images thrown on the table
This example demonstrates how to create «polaroid» pictures and rotate the pictures.

Функция rotate()

Функция rotate() свойства transform позволяет вращать элемент в 2D-пространстве. В скобках задается угол от 0 до 360 градусов. К числу дописывается приставка deg . Пример:

Если указано положительное число, поворот происходит по часовой стрелке, если отрицательное — против часовой. Если установлено значение 0deg , элемент останется в исходном положении. 360deg означает, что элемент совершит один полный оборот по часовой стрелке, 1080deg — три полных оборота, -720deg — два полных оборота против часовой стрелки и т. д.

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

А пока несколько примеров статичных элементов, трансформированных с использованием функции вращения rotate() :

Функции для каждой оси

Свойство transform поддерживает дополнительные функции, которые позволяют совершать трансформации относительно осей трехмерного пространства:

  • rotateX() — поворот элемента по оси X;
  • rotateY() — поворот по оси Y;
  • rotateZ() — поворот элемента по оси Z.

Точка вращения

Изначально поворот элемента происходит относительно его центральной оси. Но центр вращения можно изменить, воспользовавшись свойством transform-origin . В качестве значения указываются координаты для трех осей — X, Y и Z.

Единицы измерения для X и Y могут быть любыми. Также принимаются ключевые слова left , center , right (для X) и top , center , bottom (для Y). Для оси Z позволительно использовать корректные единицы измерения длины, кроме процентов.

По умолчанию настройки transform-origin следующие:

Данное свойство также требует использования префиксов производителей.

Трансформации, переходы и анимации

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

Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform .

Вращение

Для поворота элемента свойство transform использует функцию rotate :

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

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

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

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

Применение масштабирования имеет следующую форму:

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

Используя отрицательные значения, можно создать эффект зеркального отражения:

Перемещение

Для перемещения элемента используется функция translate :

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

Илон Маск рекомендует:  Шаблон сайта магазин HTML, CSS, JavaScripts, 1 страница

Наклон

Для наклона элемента применяется функция skew() :

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

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

Или наклон на 45 градусов только по оси Y:

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

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

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

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

Стажировка 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.

Transform CSS Generator: Scale, Rotate, Translate and Skew

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

Илон Маск рекомендует:  ob_clean - очищает буфер вывода

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.

Функция rotate в CSS: двумерное вращение элемента

Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать угол поворота. Кроме того, существует возможность задать произвольный центр вращения.

Трансформация блока

В CSS rotate() является функцией трансформации, поэтому она должна быть передана свойству transform элемента.

В качестве первого и единственного аргумента передается угол, на который будет повернут объект. Вращение осуществляется в двумерном пространстве. Для трехмерных трансформаций существуют функции в CSS rotateX(), rotateY(), rotateZ() и rotate3d().

Изначально занятое элементом место на странице остается за ним зарезервировано. Визуальное перемещение происходит в новом слое, не сдвигая соседние блоки.

Угол поворота

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

Центр вращения

По умолчанию вращение блока осуществляется вокруг его геометрического центра. Для изменения этой точки необходимо воспользоваться свойством transform-origin.

По стандарту оно принимает три параметра, которые определяют координаты по осям X, Y и Z. Но так как rotate() в CSS является двумерной трансформацией, достаточно будет передать только два значения.

Координата по каждой оси может быть определена в любых валидных единицах длины, процентах от размера блока или с помощью ключевых слов top, bottom, left, right. Начало координат располагается в верхнем левом углу прямоугольного контейнера.

Анимация вращения

Свойство transform хорошо поддается динамическому изменению, следовательно, CSS позволяет создать анимацию вращения элемента в двумерном пространстве.

Если требуется вращать объект в ответ на определенное пользовательское действие, например наведение курсора, можно воспользоваться CSS-свойством transition, определяющим замедленное изменение значения других свойств.

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

Более сложным способом анимации объекта является определение для него последовательности смены кадров с помощью свойств группы animation и правила @keyframes.

К указанному элементу применяется анимация rotate, определяющая полный поворот от 0 до 360 градусов в течение двух секунд. Свойство animation-iteration-count устанавливает повторение анимации до бесконечности, а animation-timing-function — плавный эффект перехода. Сочетание свойства в CSS animation с rotate-трансформаций позволяет создавать красивые динамические эффекты.

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: 534083eb3fbb8fcd • 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 и SQL