Translatey css что это

Свойство transform

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

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

Любое значение свойства transform , отличное от none, в результате дает как стековый контекст, так и содержащий блок. Это означает, что преобразуемый элемент действует как контейнер для позиционируемых фиксировано дочерних элементов.

Матрица преобразования также зависит от значения свойства transform-origin , которое используется для указания исходного положения преобразования.

Система координат

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

При применении CSS transform начало системы координат переносится в центр элемента. Это происходит потому, что значение свойства transform-origin , применяемое по умолчанию, равно 50%50. После этого все преобразования применяются к элементу на основании нового положения системы координат.

Исходная система координат и система координат при применении transform со значением свойства transform-origin, применяемым по умолчанию

С помощью свойства transform-origin можно указать, куда необходимо перенести начало координат. В зависимости от эффекта преобразования используются различные исходные положения преобразования.

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

Если нужно переместить элемент с помощью CSS text transform в другое положение и повернуть его в новом положении, вы должны сделать это в указанном порядке: переместить, а затем повернуть. Если вы повернете элемент, то повернется его система координат, и перемещение в определенном направлении не приведет к ожидаемому результату.

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

Примечания

Преобразования, применяемые к элементу, влияют на его визуальное отображение, но не влияют ни на один аспект CSS кроме свойства overflow . Пространство, которое занимал элемент до преобразования, он будет занимать после преобразования, а само преобразование не будет влиять на структуру других элементов вокруг него. Свойство CSStransform не влияет на поток контента, в котором размещается преобразованный элемент. В то же время, область заполнения учитывается при преобразовании.

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

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

Когда элемент преобразуется, значение fixed для свойства background-attachment рассматривается, как значение scroll . Вычисленное значение background-attachment не претерпевает изменений.

Кроме transform-origin при преобразовании могут использоваться свойства perspective и perspective-origin , чтобы задать для сцены глубину, а свойство transform-style — чтобы сохранить определение трехмерного пространства. Это полезно при выполнении вложенных CSS-преобразований . Все эти свойства используются в сочетании друг с другом для создания CSS-преобразования в двух или трех измерениях.

Официальный синтаксис

• Исходное значение: none
• Применяется к: трансформируемому элементу
• Анимируемо: да

Примечания

— это список из функций преобразования.

Значения

Можно применить к элементу преобразование, используя одно из следующих значений свойства transform :

• CSS transform rotate ()
• translateX()
• translateY()
• scale()
• scaleX()
• scaleY()
• rotate()
• skew()
• skewX
• skewY
• matrix()
• translateZ
• translate3d()
• scaleZ()
• scale3d()
• rotateX()
• rotateY()
• rotateZ()
• rotate3d()
• matrix3d()
• perspective()

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

Функции 2D-преобразований:

translate()

transform: translate( tx [, ty ]? ); /* Знак вопроса указывает второе значение, которое является необязательным * /

Функция CSS transform translate используется для перемещения элемента по вектору [tx, ty] , где tx — смещение по оси х , а ty — смещение по оси у . Если ty не указано, то его значение считается равным нулю, а элемент перемещается только вдоль оси х . Если единицы измерения не указаны, число будет рассматриваться как » пользовательские единицы «.

Положительное значение смещения перемещает элемент в направлении оси, а отрицательное значение — в направлении, противоположном направлению оси.

transform: translate(100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(-100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(50px, 300px); /* перемещает элемент на 50 пикселей вправо и на 300 пикселей вниз */ transform: translate(50%, 10%); /* перемещает элемент на 50% его ширины влево, и на 10% его высоты вниз */ transform: translate(-100%); /* перемещает элемент на -100% влево */ transform: translate(100px, 100px); /* результат приведен на рисунке ниже */

Результат применения к элементу смещения:

Результат применения к элементу преобразования translate(100px, 100px). Обратите внимание на преобразованную позицию начала координат.

Источник

translateY()

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a data type.

Try it

Note: translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0) .

Syntax

/* values */ transform: translateY(200px); transform: translateY(50%); 

Values

A translation is not a linear transformation in ℝ^2 and can’t be represented using a Cartesian-coordinate matrix.

Formal syntax

Examples

HTML

div>Staticdiv> div class="moved">Moveddiv> div>Staticdiv> 

CSS

div  width: 60px; height: 60px; background-color: skyblue; > .moved  transform: translateY(10px); background-color: pink; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник