scale() в CSS


Содержание

Про 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 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

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

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

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

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

Матрица преобразований имеет размер 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.

Translate, scale в CSS3

Здравствуйте, дорогие мои читатели. Помните я как-то писал статью про куб на CSS3. Сегодня мы тоже будем строить куб, но в отличие от предыдущего я не буду использовать поворот граней с помощью свойства skew. Вместо этого я использую две функции трансформации translate и rotate. А потом мы попробуем увеличить наш куб при наведении с помощью функции масштабирования — scale.

Давайте для начала выясним что же за функция такая translate? Эта функция трансформирования объекта позволяет его передвигать относительно 3-х осей координат. Имеет следующий синтаксис:

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

Ну что ж давайте создадим наш новый куб.

Здесь я использовал два новых свойства:perspective-origin и transform-style: preserve-3d. Первое определяет, где будет располагаться наш объект на осях X, Y, а второе определяет, как будут располагаться дочерние элементы.

Без свойства perspective-origin мы увидим неясную картинку куба. По умолчанию perspective-origin:50% 50%. Из кода выше можно догадаться, что мы строим куб размером 150*150*150. Со сторонами:

  • 1,2 — передняя, задняя;
  • 3,4 — верхняя, нижняя;
  • 5,6 — левая, правая.

Общие свойства сторон мы задаём при помощи класса side. В результате должно получиться следующее: куб 3D. Давайте попробуем увеличить наш куб при наведении при помощи функции scale3d:

По аналогии с translate общий синтаксис для этой функции будет следующим:

И подводя итог в конце концов мы получим: масштабируемый куб.

Все права на сайт принадлежат Александру Побединскому.

Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

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:

CSS transform Свойство

Пример

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

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

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

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

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

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

Илон Маск рекомендует:  Что такое код swfmovie &#62;remove
Значение по умолчанию: 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» и поворот рисунков.

CSS scale() Function

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

The scale() function scales an element based on the number/s that you provide as an argument. You can scale in the direction of the x -axis, the y -axis, or both.

The scale() function works like this:

Scale along both Axes

Here’s an example of scaling an element in the direction of both the x axis and the y axis.

Here we use scale(2) to make the element scale along both axes but we could also have used scale(2, 2) :

Scale along the x -axis

Here’s an example of scaling an element in the direction of the x axis. Note that we use a parameter of 1 for the y axis so that it remains at its original scale.

Scale along the y -axis

Here’s an example of scaling an element in the direction of the y axis:

Removing transform-origin

In the previous examples, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top left; so that the images don’t overlap as a result of the scaling operation.

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 scale operation might look like when using the default transform-origin value.

Official Syntax

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

Possible Values

The scale() function accepts number parameters that define the scaling vector for the scale operation.

A is either an integer, or zero or more decimal digits followed by a dot ( . ) followed by one or more decimal digits and optionally an exponent composed of e or E and an integer.

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

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

Одним из нововведений 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() (перемещение по вертикали). Например:

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

Наклон

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

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

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

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

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

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

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

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

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

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

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

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 свойства

    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).

    Илон Маск рекомендует:  FindNext - Функция Delphi
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL