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

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

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 – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).

Пример №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 для этого вполне достаточно.

Илон Маск рекомендует:  Изменение текста в INPUT

CSS свойство transform

Свойство transform применяет к элементу 2D или 3D трансформацию. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

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

CSS синтаксис

Возможные значения

Функция scale масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0,5) уменьшит элемент в 2 раза. Предоставление различных значений будет искажать элемент.

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

CSS 2D Transforms

Преобразования CSS

Преобразования CSS позволяют переводить, вращать, масштабировать и наклонять элементы.

Преобразование — это эффект, который позволяет элементу изменять форму, размер и положение.

CSS поддерживает 2D и 3D преобразования.

Наведите курсор мыши на элементы ниже, чтобы увидеть разницу между 2D и 3D преобразования:

Поддержка браузеров для 2D преобразований

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

Номера следуют-MS-,-WebKit-,-МОЗ-, или-o-указать первую версию, которая работала с префиксом.

Значение Описание
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) Применяет 3D трансформацию с помощью матрицы из шестнадцати (4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению свойства «position: relative;«. При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Применяет смещение, только по оси Х.
translateY(y) Применяет смещение, только по оси Y.
translateZ(z) Применяет смещение, только по оси Z.
scale(x,y)
Свойство
transform 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-
12.1
10.5 -o-
transform-origin
(two-value syntax)
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-
12.1
10.5 -o-

2D преобразования CSS

В этой главе вы узнаете о следующих методах 2D преобразования:

Совет: В следующей главе вы узнаете о трехмерных преобразованиях.

Метод Translate ()

Метод translate() перемещает элемент из текущей позиции (в соответствии с параметрами, заданными для оси X и оси Y).

В следующем примере перемещается элемент

Пример

Метод поворота ()

Метод rotate() вращает элемент по часовой стрелке или против часовой стрелки в зависимости от заданного градуса.

В следующем примере элемент

Пример

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

В следующем примере элемент

Пример

Метод Scale ()

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

В следующем примере элемент


Пример

В следующем примере элемент

Пример

Метод скевкс ()

Метод skewX() наклоняет элемент вдоль оси X заданным углом.

Следующий пример искажает элемент

Пример

Метод наклона ()

Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.

Следующий пример искажает элемент

Пример

Метод наклона ()

Метод skew() искажает элемент вдоль оси X и Y по заданным углам.

В следующем примере наклон элемента

Пример

Если второй параметр не указан, он имеет нулевое значение. Таким образом, следующий пример искажает элемент

Пример

Метод Matrix ()

Метод matrix() объединяет все методы 2D преобразования в один.

Метод Matrix () принимает шесть параметров, содержащих математические функции, которые позволяют вращать, масштабировать, перемещать (переводить) и наклонить элементы.

Параметры следующие: Матрица (scaleX (), перекос (), скевкс (), масштабирование (), транслатекс (), транспоздний ())

Пример

Свойства преобразования CSS

В следующей таблице перечислены все 2D-преобразования свойств:

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

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

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

  • В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах ( grad) . Полный круг равен 400grad,
  • В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

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

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

Функция translate()

Еще одна функция свойства transform — это translate() , с помощью которой можно переместить элемент с его начальной точки. Функция принимает два параметра — один для перемещения по оси X, второй — по оси Y.

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

Независимо от того, куда и на какое расстояние вы переместите элемент, место его изначального расположения в потоке документа будет зарезервировано за ним, и другие элементы не смогут его занять. На месте перемещаемого элемента останется пустое пространство, а сам элемент в смещенном состоянии может накладываться либо подкладываться под соседние элементы. Какой элемент будет находиться выше, а какой — ниже, можно определить с помощью свойства z-index (оно будет рассмотрено в книге чуть позже).

В нашем примере перемещаемый элемент прячется за соседними блоками:

Отдельные функции для осей

Вы также можете управлять перемещением элемента, используя отдельные функции translate для трех осей — translateX() , translateY() , translateZ() . Если в параметре translateZ() указано положительное число, перемещение элемента происходит вперед, если отрицательное — назад.

Функция 3D

Некоторые функции свойства transform имеют дополнительную 3D-версию себя, которая принимает три значения — для трех осей. Так, в расширенной функции translate3d() можно указать значения для X, Y и Z через запятую. Такие же вариации существуют и у некоторых ранее рассмотренных функций — rotate3d() и scale3d() .

Обратите внимание: если у вас не работает translateZ() или другая аналогичная функция, где затрагивается ось Z, не спешите паниковать. Дело в том, что движение по оси Z будет заметным лишь в том случае, если в CSS установлена перспектива. Мы разберем эту тему через один урок.

CSS от А до Я: разница между translate и position relative

Дата публикации: 2020-11-14

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я расскажу вам, чем отличается translate от position.

Видеоурок и его текстовую версию по translateX вы найдете здесь.

X значит translate и position

Существует множество CSS свойств, с помощью которых можно размещать элементы на странице. Среди таких свойств есть распространенные типа float, margin и padding, а также более точные типа position и translate().

На первый взгляд, свойства position: relative и transform: translate() работают одинаково, однако есть несколько тонких различий, которые нужно знать, чтобы уметь подбирать правильное свойство.

Чем отличается translate от position: relative?

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Задав свойство position: relative на элементе, мы создаем границы для дочерних элементов с абсолютным позиционированием. Это самый распространенный способ применения, но мы поговорим о другом.

Если использовать свойство position: relative вместе с одним из свойств смещения top, bottom, left или right, можно сдвинуть элемент со своего места в макете, сохранив изначально занимаемое им пространство. Элемент переместится на новый слой. Порядок слоев или стека можно контролировать с помощью свойства z-index.

В примере выше элемент будет сдвинут на 100px вниз и на 50px вправо. Очень похожий результат получится при использовании свойства transform:translate(x,y). Код выше можно переписать так:

В этом случае мы сдвигаем координаты элемента на 100px по оси Х и на 50px по оси У. Конечный результат ничем не отличается от предыдущего. Зачем же нам два способа для одного и того же? В данных подходах есть различия…

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

Position относится к CSS2, а transform – к CSS3. Поддержка данных свойств в браузерах разная. 2D трансформации не поддерживаются в IE8 и ниже. Если вам необходимо поддерживать старые версии IE, свойство transform вам не поможет.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

GPU ускорение

Свойство transform по возможности использует аппаратное ускорение. Если к элементу применяется анимация или плавные переходы, у translate есть преимущества в производительности.

Если в переходах или keyframe анимации есть этапы с передвижением элементов, лучше используйте translate. Касается как абсолютного, так и относительного позиционирования. Более подробно эту тему можно изучить в видео Пола Айриша. В нем также объясняется, как производились замеры производительности.

Разное поведение процентных значений

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

Оба элементы сдвинуты от левого края на 50%. Левый край красного квадрата сдвинут на 50% от края родительского контейнера. Левый край голубого квадрата сдвинут на 100px от левого края родительского контейнера. 50% от 200px будет 100px. Если задать процентное значение в свойстве translate, значение вычисляется относительно ширины или высоты элемента.

Объединение position и translate

Последнее, на что стоит обратить внимание – так как свойства position и transform – это разные свойства, мы можем использовать их вместе. Мы можем поместить элемент в определенное место при помощи абсолютного позиционирования, а потом изменить position при помощи transform.

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

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

Автор: Guy Routledge

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    translateX()

    The translateX() function is a 2D transform function used to translate an element along the x-axis.

    It takes a translation value tx as an argument. This value specifies the amount by which an element is to be translated.

    The translation value tx is provided either as a or as a percentage . Not including a unit type will cause the number to be interpreted as a “user unit”.

    Positive translation values will move the element along the positive direction of the x-axis, and negative values will move it in the opposite direction.

    The official syntax looks as follows:

    For a better understanding of the transform functions, please refer to the transform entry.

    Browser Support

    The following is the support table for two-dimensional CSS transformations:

    CSS3 2D Transforms

    Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.

    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

    Илон Маск рекомендует:  Справочник по инструкциям и функциям interbase sql
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL