transform-style в CSS


Содержание

Про CSS

Transform

Css transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

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

дадут совершенно разный результат, а строчка:

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center . Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

flat — трансформируемый элемент плоский preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style :

overflow с любым значением кроме visible opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d; . На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским. filter с любым значением кроме none

Perspective

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

Возможные значения: none или длина в пикселях.

Perspective-origin

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

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Backface-visibility

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

Возможные значения: visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию). hidden — скрывать объект, если он повернут «спиной».

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

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

CSS синтаксис

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

Значение Описание
flat Значение по умолчанию. Дочерние элементы не сохраняют свою позицию в 3D-пространстве.
preserve-3d Дочерние элементы сохраняют свою позицию в 3D-пространстве.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем, чтобы дочерние элементы сохраняли свое положение в 3D-пространстве

CSS | Свойство transform-style

Свойство transform-style используется для указания того, что дочерние элементы элемента находятся в трехмерном пространстве или сглажены относительно плоскости элемента.

Синтаксис:

Стоимость недвижимости:

    flat: это значение помещает дочерние элементы в одну плоскость родительского элемента. Не сохраняет 3D-положение. Это значение по умолчанию.

CSS3 transform-style Property

Description

The transform-style CSS property specifies whether the children of the element are positioned in the 3D-space or are flattened in the plane of the element. If flattened, the child elements will not exist on their own in the 3D-space.

This property is only applied to child elements that have a transform property specified.

The following table summarizes the usages context and the version history of this property.

Default value: flat
Applies to: Transformable elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

flat | preserve-3d | initial | inherit

The example below shows the transform-style property in action.

Example

Property Values

The following table describes the values of this property.

Value Description
flat The children of the element are flattened i.e. lying in the plane of the element itself. This is default value.
preserve-3d The children of the element should be positioned in the 3D-space.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element transform-style property.

Browser Compatibility

The transform-style property is supported in all major modern browsers.

Функции 3D-трансформации в CSS

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

HTML-элементы могут быть трансформированы в трех направлениях:

  • горизонтальная ось X;
  • вертикальная ось Y;
  • и уходящая вглубь монитора ось Z.

Считается, что поверхность экрана — это начало Z-оси. Объекты с положительными Z-координатами будут выдвигаться ближе к пользователю, а с отрицательными — перемещаться вдаль. При добавлении перспективы слой с большим отрицательным Z-значением может полностью пропасть.

Следует отметить несколько моментов:

  1. CSS может только преобразовать двумерные элементы HTML в трехмерном пространстве. Сами элементы остаются плоскими и имеют нулевую глубину. Масштабирование в z-плоскости не сделает из квадрата куб. В принципе, вы можете создать полноценный куб, но для этого потребуется шесть элементов: по одному для каждой стороны.
  2. 3D-преобразования отлично подходят для создания эффектов страницы, но вряд ли позволят создать следующий MineCraft или Call of Duty. Сложные модели лучше реализовать с использованием WebGL.

3D преобразования хорошо поддерживаются во всех современных браузерах (включая IE10+) с некоторыми исключениями:

  • Internet Explorer не поддерживает transform-style: preserve-3d , что делает невозможным создание 3D сцен.
  • Все версии Safari должны использовать префикс -webkit-backface-visibility для скрытия задних граней. Все остальные браузеры поддерживают свойство backface-visibility .

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

transform

К любому элементу можно применить свойство transform . Оно принимает функцию с одним или несколькими параметрами. Например:

Свойство transform

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

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

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

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

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

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

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

С помощью свойства 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()

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

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

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

translateX()

Функция CSS transform translateX() используется, чтобы переместить элемент на заданное расстояние вдоль оси х . Значение tx задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться как « пользовательские единицы «.

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

translateY()

Функция translateY() используется для перемещения элемента на заданное расстояние вдоль оси Y . Значение ty задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться, как « пользовательские единицы «.

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

scale()

Функция CSS transform scale используется для масштабирования ( растягивания или сжатия ) элемента путем изменения его размеров в большую или в меньшую сторону. Она принимает в качестве значения одно или два числа без единиц измерения, sx и sy , где sx изменяет размеры элемента по оси х , а sy — по оси у . Если указано только одно значение ( sx ), второе значение ( sy ) будет рассматриваться, как равное первому.

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

Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно нулю, то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента в определенном направлении.

На следующем рисунке показан результат применения к изображению различных преобразований scale() . Первое слева — изображение без каких-либо преобразований. Второе — результат применения transform: scale(2); , третье — результат применения transform: scale(0.5) , а четвертое — результат применения transform: scale(0.5, 1.5); .

Обратите внимание, как изображения накладываются друг на друга, так как преобразование каждого из них не влияет на поток контента вокруг него:

Следующее изображение является результатом применения преобразования CSS transform scale ( и его вариаций ) с отрицательными значениями:

scaleX()

Функция scaleX() используется для масштабирования, растягивания или сжатия элемента, делая его больше или меньше, по оси х . Она принимает в качестве значения число sx , которое используется для изменения размера элемента по оси х .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть шире по оси х . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента по горизонтали ( как будто он поворачивается вокруг оси y ).

scaleY()

Функция CSS transform scaleY() используется для масштабирования, растягивания или сжатия элемента в размерах по оси у . Она принимает в качестве значения число sу , которое используется для изменения размера элемента по оси y .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть выше по оси y . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно 0 , то элемент исчезает.

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

rotate()

Функция rotate() используется для вращения элемента в двухмерном пространстве. Элемент поворачивается на угол, который передается функции. Элемент вращается вокруг начала координат, как это определено свойством transform-origin .

Положительное значение задает вращение элемента по часовой стрелке. Отрицательное значение — против часовой стрелки.

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

Функция skew() используется для наклона ( скоса ) элемента. Наклон элемента выглядит, как применение для него эффекта скоса. Функция принимает один или два аргумента: ax и ay . Оба являются значениями углов. Первое значение ( ах ) скашивает элемент вдоль оси х , а второй аргумент ( ау ) — вдоль оси у .

Скашивание вдоль оси х похоже на то, если бы мы потянули противоположные углы в противоположные стороны, а скашивание вдоль оси у — если бы мы потянули противоположные углы вертикально в противоположных направлениях ( вверх и вниз ). Два значения определяют величину, на которую скашивается элемент. Если второе значение не указано, оно считается равным 0 .

Функция transform skew CSS присутствовала в ранних версиях спецификации. Она был удалена из нее, но по-прежнему присутствует в некоторых реализациях. * Не используйте ее *. Чтобы скосить элемент в любом направлении, используйте функции skewX() и skewY() , описанные ниже. Также обратите внимание на то, что поведение функции skew() отличается от умножения преобразований skewX() и skewY() .

skewX()

Функция skewX() используется для наклона элемента. Наклон элемента выглядит, как применение для него эффекта скоса. В случае с skewX() , процесс похож на то, если бы мы захватили две противоположные вершины прямоугольника и потянули их в противоположных направлениях вдоль оси x , превращая прямоугольник в параллелограмм.

Функция принимает в качестве значения ax . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов ( ах ).

Если значение угла положительное, « растягиваются » левый верхний и нижний правый углы прямоугольника. Если значение отрицательное — верхний правый и нижний левый угол. При значении угла в 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

На приведенном ниже рисунке показан результат применения к изображению skewX() с положительным, а затем с отрицательным углом одной и той же величины:

Наклон элемента также искажает систему координат. Когда система координат скашивается, последовательные преобразования могут привести к неожиданным результатам, если не рассчитать их на основе новой системы координат. Узнать больше о системах координат в CSS и SVG можно здесь .

skewY()

Функция skewY() используется для наклона элемента. Наклон элемента выглядит, как применение для него эффекта скоса. В случае с skewY() , процесс похож на то, если бы мы захватили две противоположные вершины прямоугольника и потянули их в противоположных направлениях вдоль оси y , превращая прямоугольник в параллелограмм.

Функция CSS transform принимает в качестве значения ау . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов – ау .

Если значение угла положительное, « растягиваются » левый верхний и нижний правый угол прямоугольника. Если значение отрицательное — верхний правый и нижний левый. При значении угла 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

На следующем рисунке показан результат применения к изображению skewY() с положительным, а затем с отрицательным углом одной и той же величины:

Следует помнить, что наклон элемента также искажает его систему координат.

matrix()

Функция matrix() используется для указания двухмерной матрицы преобразования. Она может быть использована для объединения нескольких преобразований в одно. Например, вместо использования двух ( или более ) функций преобразования ( смотрите выше ) в одном объявлении, например, следующим образом:

С помощью функции CSStransform matrix можно объединить эти два преобразования в одну матрицу:

Вычислить значения функции matrix3d() будет нелегко. К счастью, Эрик Мейер и Аарон Густафсон создали весьма полезный инструмент , который может выполнить расчеты вместо вас. Все, что нужно сделать, это ввести значения transform , которые вам нужны, и нажать на красную кнопку, чтобы инструмент сгенерировал для вас эквивалентную функцию matrix() .

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

translateZ()

Функция translateZ() используется для перемещения элемента на заданное расстояние вдоль оси z . Значение tz задается в единицах длины ( проценты здесь не допускаются ). Если единицы измерения не указаны, число будет рассматриваться, как « пользовательские единицы «.

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

translate3d()

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

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

scaleZ()

Функция scaleZ() используется для масштабирования элемента в третьем измерении, вдоль оси z . Она принимает в качестве значения число без единиц измерения sz , которое используется для изменения размеров элемента в соответствующем направлении.

Формально, scaleZ() масштабирует элемент вдоль оси z . Но фактически, это выглядит наподобие того, как если бы масштабировалась ( сжималась / растягивалась ) сама ось z , а затем элемент смещался бы вместе с осью после ее масштабирования.

Эффект CSS transform scaleZ более очевиден, когда у вас есть элемент с заданной перспективой, который вращается в трехмерном пространстве или перемещается вдоль оси z .

В первом примере у нас есть два элемента, которые расположены в трехмерном пространстве и перемещаются вдоль оси z с помощью функции translateZ() . Оба перемещаются на одинаковое расстояние. Затем мы масштабируем второй элемент ( правый ), используя scaleZ(2) . На следующем рисунке показан результат применения преобразований, а также разница между этими двумя элементами после масштабирования второго с помощью функции scaleZ .

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

Другой пример, на котором можно четко проследить эффект применения scaleZ . Два элемента сначала преобразуются одинаковым образом, но вместо перемещения в трехмерном пространстве мы вращаем их по оси х с помощью функции rotateX . Второй элемент ( справа ) был уменьшен по оси z с помощью функции scaleZ() . Обратите внимание, что он выглядит расположенным ближе к вам и, таким образом, больше:

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

scale3d()

Функция scale3d() является трехмерным аналогом функции scale() . Она используется для сжатия или растягивания элемента, делая его больше или меньше. Функция принимает в качестве значений три числа без единиц измерения: sx , sy , и sz . Где: sx масштабирует элемент по оси х , sy — по оси у , а sz — по оси z .

Если заданное значение больше 1 , элемент растягивается в соответствующих направлениях и будет выглядеть больше. Если значение равно 1 , то он остается неизменным ( в соответствующих направлениях ). Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допускаются, но они не масштабируют элемент. На самом деле отрицательные значения sx и sy поворачивают элемент по соответствующей оси.

rotate3d()

Функция rotate3d() является трехмерным аналогом функции CSS transform rotate . Она используется для вращения элемента в трехмерном пространстве. Элемент поворачивается на угол, который передается в качестве четвертого параметра. Первые три параметра определяют направление вращения, и вместе они образуют направление вектора [x, y, z] , который используется, чтобы применить вращение в заданном направлении.

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

На следующем рисунке показаны положительные направления вращения ( по часовой стрелке ) по трем осям:

Первые три параметра rotate3d() указывают направление вектора, вдоль которого будет происходить вращение, а угол — указывает направление: по часовой стрелке по вектору или против часовой стрелки.

На следующем рисунке показан результат применения к изображению преобразования rotate3d (1, 1, 1, 50deg); :

rotateX()

Функция rotateX() используется для вращения элемента вокруг оси х в трехмерном пространстве. Это эквивалентно:

где CSS transform rotate3d — это функция преобразования, используемая для вращения элемента в трехмерном пространстве.

Функция принимает в качестве значение угол. Элемент поворачивается на указанное значение вокруг оси х. Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное элемент — против часовой. Направление по часовой стрелке определяется, если смотреть на ось х с конца (где, как правило, размещается стрелка указателя направления) на начало координат.

На следующем рисунке показан результат применения к изображению rotateX(50deg) и rotateX(-50deg) :

rotateY()

Функция rotateY() используется для вращения элемента вокруг оси y в трехмерном пространстве. Это эквивалентно:

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

Функция принимает в качестве значения угол. Элемент поворачивается на указанное значение вокруг оси у . Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное — против часовой стрелки

На следующем рисунке показан результат применения к изображению rotateY(50deg) и rotateY(-50deg) :

rotateZ()

Функция CSS transform rotateZ() используется для вращения элемента вокруг оси z в трехмерном пространстве. Это эквивалентно:

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

Элемент поворачивается на указанное значение вокруг оси z . Если значение положительное, элемент поворачивается по часовой стрелке, если — против часовой стрелки.

Примеры:

На следующем рисунке показан результат применения к изображению rotateZ(50deg) и rotateZ(-50deg) :

matrix3d()

Функция matrix3d() является трехмерным эквивалентом функции matrix() . matrix3d() используется для объединения преобразований в одну матрицу и описания последовательностей трехмерных преобразований в сетке 4 ; 4 .

Например, вместо того, чтобы использовать две ( или более ) функции преобразования в одном объявлении следующим образом:

Можно объединить эти два преобразования в одну матрицу с помощью функции CSS transform matrix3d() :

perspective()

Техническое описание:

Функция perspective() задает матрицу перспективной проекции. Эта матрица масштабирует точки в X и Y , основываясь на их значениях Z , масштабируя точки с положительными значениями Z в направлении от начала координат, а с отрицательными значениями Z — в направлении к началу координат.

Точка на плоскости Z = 0 не изменяются. Значение длины, передаваемое в функцию, определяет расстояние от плоскости Z = 0 до зрителя. Более низкие значения дают более сплюснутую пирамиду и, следовательно, с перспективой эффект становится более выраженным. Например, значение длины 1000 пикселей в перспективе задает небольшие изменения, а значение 200 пикселей — намного большие. Значение глубины должно быть больше 0 , в противном случае функция является недействительной:

Функция CSS transform perspective() используется, чтобы задать глубину элемента, делая элементы, расположенные выше по оси z ( ближе к зрителю ), выглядящими больше, а элементы, расположенные дальше — выглядящими меньше. Чем меньше значение, тем ближе плоскость z к зрителю и тем больше выражен эффект. Чем выше значение, тем дальше от экрана расположен элемент и тем меньше наблюдаются изменения в перспективе.

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

Перспектива может быть применена с помощью функции perspective() или с помощью свойства perspective . Существует большая разница между этими двумя методами. Я лишь отмечу, что функция perspective() применяется к элементу, который трансформируется в 3D-пространстве , в то время как свойство perspective применяется к элементу, дочерние элементы которого в преобразуется в 3D-пространстве .

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

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

Функция perspective() принимает в качестве параметра значение длины. Чем меньше его значение, тем ближе плоскость z от зрителя, и тем более заметен эффект. Чем выше значение, тем дальше элемент от экрана и менее заметен эффект. На следующем рисунке показан результат применения к элементу разных значений perspective() :

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

Примечания

Элемент может быть перемещен с помощью свойства CSS position и его связанных свойств. Но лучше перемещать элемент с помощью функции CSS transform translate , потому что она задействует аппаратное ускорение и обеспечивает более высокую производительность. Функция translate3d() также иногда используется, чтобы применить аппаратное ускорение при анимировании элементов в WebKit-браузерах . Это позволяет создать более плавную анимацию.

Примеры

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

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

В этом transform CSS примере к элементу применяется перспектива с помощью функции perspective() :

Можно выполнить то же самое преобразование, но вместо того, чтобы применять к элементу перспективу, можно активировать в контейнере 3D-пространство :

Интерактивная демо-версия

Кликните по элементу в приведенной ниже демо-версии, чтобы увидеть его преобразование в трехмерном пространстве. Эффект преобразования применяется после клика с помощью JavaScript . При нажатии на элемент более одного раза переключается класс .transform , который содержит преобразования. CSS-переходы используются, чтобы сделать преобразование плавным.

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

Ниже приводится таблица поддержки двухмерных CSS-преобразований :

Поддержка 2D-преобразований CSS3

Метод преобразования элемента, включая вращение, масштабирование и т.д., включает поддержку свойства CSS transform , а также свойства transform-origin .

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

Стационарные Мобильные
Chrome 4 * Firefox

3.5 * IE 6 Opera 10. * Safari 3.1 * Chrome

3.2 * Firefox2.1 * IE 11 Opera 54 Safari 50 Поддержи-вается Поддержи-

вается Полифилл Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается

Ниже приводится таблица поддержки трехмерных преобразований CSS :

Поддержка 3D-преобразований CSS3

Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility для переключения отображения обратной стороны преобразуемого элемента.

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

Стационарные Мобильные
Chrome 12 * Firefox 10 * IE 15 * Opera 4 * Safari 3.1 * Chrome 3.2 * Firefox 3 * IE 37 Opera 54 Safari 50
Поддержи-вается Поддержи-вается Частично Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается

Данная публикация представляет собой перевод статьи « transform » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS transform-style

The CSS transform-style property is used to determine whether child elements (of a 3D element) should be 3D or flat.

If the value is preserve-3d , the children of the element will be positioned in the 3D-space (i.e. they will appear as 3D). If the value is flat , the children will appear flat (i.e. they won’t appear as 3D).

Syntax

Possible Values

Explanation of these values:

preserve-3d Specifies that the children of the element should be positioned in the 3D-space. flat Specifies that the children of the element are lying in the plane of the element itself.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

In HTML, a transformable element is either:

  • a block-level or atomic inline-level element
  • or whose CSS display property computes to table-row , table-row-group , table-header-group , table-footer-group , table-cell , or table-caption

In SVG, a transformable element is an element which has the attributes transform , patternTransform or gradientTransform .

Inherited? No Media Visual Computed Value Same as specified value.

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The transform-style property is defined in CSS Transforms Module Level 1 (W3C Working Draft, 26 November 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

3D-трансформации средствами CSS

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

Для усвоения материала необходимо самому сделать что-нибудь любопытное с использованием прочитанного. Какой трехмерный объект сделать легче всего? Пожалуй, кубик. А чтобы результат получился интереснее и красивее, пусть это будет игральный кубик с точками на гранях. Поехали.

Для нетерпеливых и тех, кто смотрит Хабр ради забавных картинок – конечный результат. Работает в Chrome, последних версиях Firefox, Safari. Opera 12.01 — пока никак, ну а про IE вы и сами все знаете.

Стройматериалы

Для начала сделаем заготовку. Блок-контейнер, чтобы отцентрировать все на странице, блок-куб, в который будем вкладывать все составляющие нашей скульптуры, и «развертка» из пяти (шестую добавим потом) будущих граней куба.

«Грани» представляют собой банальные квадратные div’ы, абсолютно спозиционированные в блоке-кубе: «единичку» оставим в центре, она послужит лицевой стороной, а все остальные состыкуем с ней, как на рисунке 1. Покрасим их для веселья и наглядности в разные цвета, добавим внутреннюю тень – и хватит.

Точки на гранях – тоже блоки с position: absolute, border-radius: 50% и внутренней тенью (box-shadow: inset …) для придания иллюзии объема.

Напоследок — два не таких банальных момента.

Для самого куба нужно указать

иначе будет использоваться значение по умолчанию – flat, трехмерный мир снова станет плоским и от нашего куба останется только одна грань, которая расположена «лицом» к пользователю.

Маленькая ремарка: здесь и далее css-свойства для трансформаций указаны без префиксов, но в реальном коде, пока что, необходимо их использовать.

Также добавим кубику свойство

которое определит, как сильно он будет искажаться из-за перспективы. Чем больше значение, тем дальше находится точка «схождения линий», тем меньше выражен эффект искажения. Значения ниже 200 приводят к диким результатам (например, рисунок 2), около 300 – к заметному искажению (рисунок 3), мы же ограничимся скромными 900, дающими очень умеренный эффект.

С рутиной закончили, начинается интересное.

Сгибаем и клеим

Чтобы превратить нашу развертку в подобие кубика, нужно «согнуть» ее по линиям примыкания крайних граней к грани-1. Для этого нам надо сделать две вещи.

Во-первых, установить для каждой грани ось, вокруг которой она будет вращаться. Дело в том, что по умолчанию блоки поворачиваются вокруг своего центра, а нам нужно несколько иное поведение – на рисунке 4 видно, что грань-5 должна вращаться вокруг отрезка AB, грань-2 вокруг BC, и так далее.

которое сдвигает оси вращения для объекта. Например, для грани-5 нужно ось X (горизонтальная) сдвинуть к нижнему краю, соответственно второе значение transform-origin должно быть 100% (transform-origin: 0 100%;). Значение Y в данном случае неважно, т.к. вращать эту грань мы будем исключительно вокруг горизонтальной оси. Для грани-2 все наоборот – значение X неважно, а Y должно быть установлено в 0, т.е. подойдет значение transform-origin: 0 0.

Во-вторых, и, для данной статьи, «в-главных», для непосредственного вращения элементов используем

Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект, а последний – на сколько градусов. X, Y и Z задаются не как абсолютные величины, а как соотношение углов. Например, код transform: rotate3d(2, 1, 0, 90deg); заставит объект повернуться на 90 градусов вокруг оси X и на 45 (90 * 1 / 2) градусов вокруг Y. То же самое сделает и строчка transform: rotate3d(90, 45, 0, 90deg).

На рисунке 5 я постарался проиллюстрировать вращение блоков вокруг осей: серый прямоугольник – исходное положение блока, красным выделяется ось, вокруг которой происходит вращение, красный и зеленый прямоугольники – положение блока при повороте на -60 и 60 градусов соответственно.

Повернем грани со второй по пятую на 90 градусов вокруг соответствующих осей, после чего, для наглядности, повернем и сам куб, добавив к .cube свойство transform: rotate3d(1,2,0, -150deg), в результате чего получится нечто, изображенное на рисунке 6.

Куб почти готов, осталось только «закрыть» его.

Закрываем крышкой и подаем к столу

Последнюю грань нужно расположить там же, где «единичку», но «глубже» в экран на 200px (размер граней куба). Сделаем это с помощью свойства

которое позволяет сдвигать блок по любой из трех осей. В нашем случае – движение по оси Z на минус 200 пикселей (отрицательные значения «удаляют» блок, положительные – «приближают»). Одновременно повернем грань на 180 градусов по оси X – хотя, при значениях по умолчанию, «точки» будут отображаться с обеих ее сторон, правильнее будет поставить грань лицевой стороной к зрителю, а не внутрь куба. В итоге свойство transform для нашей «крышки» будет выглядеть следующим образом: transform: translate3d(0,0,-200px) rotate3d(1,0,0,180deg).

Напоследок, с помощью банального opacity: 0.9, добавим немного прозрачности (в Firefox, по невыясненной мной причине, работает только добавление этого свойства для отдельных граней, но не для всего блока-куба сразу) – так наш кубик становится немного похож на стеклянный, выглядит более презентабельно и, если честно, вызывает у автора приступ теплой ностальгии по тем временам, когда «компьютер» был непонятной машиной у папы на работе, а генератором псевдослучайных чисел во множестве игр выступал подобный игральный кубик.

Let’s rock, let’s roll

Кубик готов, но чтобы посмотреть на него с другой стороны, нужно лезть и править CSS – не самый user-friendly вариант, прямо скажем. Поступим по-другому.

В начало блока-контейнера (до куба) добавим четыре кнопки:

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

», в отличие от «+», распространяется не только на непосредственного соседа, но и на «отстоящих» дальше, лишь бы они находились на одном уровне в DOM-дереве, чем мы и пользуемся. При наведении мыши на кнопку .a-top повернем следующий за ней блок .cube так, как нам хочется.

Одновременно с этим изменим перспективное искажение с помощью perspective(900px). Как вы помните (помните, правда?), мы установили такое же значение для куба в начале работы, но если не объявить это свойство снова после того, как куб станет к нам задом, а к лесу (на обоях рабочего стола) передом, то и это искажение вывернется вместе с кубом – ближняя к зрителю часть будет уменьшена, а дальняя – расширена. Выглядит неправдоподобно, поэтому будем назначать perspective заново при каждом повороте.

Ну и чтобы наш куб не прыгал из одного положения в другое, а плавно вращался – добавим ему строчку

В переводе на русский — скажем кубу плавно изменять все свойства (all), которые будут изменяться, в течение одной секунды (1s) и делать это по функции ease, т.е. в начале анимации плавно ее ускорить, а в конце – плавно остановить. Любители равномерности вместо ease могут указать linear – в таком случае кубик будет двигаться нудно и бездушно.

Однако, Хьюстон, у нас еще одна проблема. Вращение идет вокруг центра грани-1, а не центра самого куба – что, в общем, логично, ведь это она у нас вписана в блок-куб, а все остальные – «загнуты» или вынесены «вглубь». Впрочем, решается это довольно просто: нужно просто «подвинуть» все грани ближе к наблюдателю с помощью все того же translate3d(0,0,100px) так, чтобы центр вращения совпал с центром куба.

Вот теперь получилось неплохо. Можно писать статью на Хабр, чтобы закрепить материал, поделиться изученным с коллегами и просто выпендриться.

CSS стиль transform. Правила трансформации объектов.

Internet Explorer 9 поддерживает свойство -ms-transform.

Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Opera с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

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

Краткая информация по CSS-свойству transform

Значение по умолчанию none
Наследуется Нет
Применяется К трансформируемым элементам

Правила написания свойства transform

Здесь — функция трансформации. Значение none отменяет трансформацию.

Функции трансформации

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

Масштаб элемента по горизонтали и вертикали. Значение 1 — уменьшает.

Масштабирует элемент по горизонтали.

Масштабирует элемент по вертикали.

Наклоняет элемент на заданный угол по вертикали.

Наклоняет элемент на заданный угол по горизонтали.

Сдвигает элемент на заданное значение по горизонтали и вертикали.

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

Свойство transform

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

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

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

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

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

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

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

С помощью свойства 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()

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

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

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

translateX()

Функция CSS transform translateX() используется, чтобы переместить элемент на заданное расстояние вдоль оси х . Значение tx задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться как « пользовательские единицы «.

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

translateY()

Функция translateY() используется для перемещения элемента на заданное расстояние вдоль оси Y . Значение ty задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться, как « пользовательские единицы «.

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

scale()

Функция CSS transform scale используется для масштабирования ( растягивания или сжатия ) элемента путем изменения его размеров в большую или в меньшую сторону. Она принимает в качестве значения одно или два числа без единиц измерения, sx и sy , где sx изменяет размеры элемента по оси х , а sy — по оси у . Если указано только одно значение ( sx ), второе значение ( sy ) будет рассматриваться, как равное первому.

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

Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно нулю, то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента в определенном направлении.

На следующем рисунке показан результат применения к изображению различных преобразований scale() . Первое слева — изображение без каких-либо преобразований. Второе — результат применения transform: scale(2); , третье — результат применения transform: scale(0.5) , а четвертое — результат применения transform: scale(0.5, 1.5); .

Обратите внимание, как изображения накладываются друг на друга, так как преобразование каждого из них не влияет на поток контента вокруг него:

Следующее изображение является результатом применения преобразования CSS transform scale ( и его вариаций ) с отрицательными значениями:

scaleX()

Функция scaleX() используется для масштабирования, растягивания или сжатия элемента, делая его больше или меньше, по оси х . Она принимает в качестве значения число sx , которое используется для изменения размера элемента по оси х .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть шире по оси х . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента по горизонтали ( как будто он поворачивается вокруг оси y ).

scaleY()

Функция CSS transform scaleY() используется для масштабирования, растягивания или сжатия элемента в размерах по оси у . Она принимает в качестве значения число sу , которое используется для изменения размера элемента по оси y .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть выше по оси y . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно 0 , то элемент исчезает.

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

rotate()

Функция rotate() используется для вращения элемента в двухмерном пространстве. Элемент поворачивается на угол, который передается функции. Элемент вращается вокруг начала координат, как это определено свойством transform-origin .

Положительное значение задает вращение элемента по часовой стрелке. Отрицательное значение — против часовой стрелки.

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

Функция skew() используется для наклона ( скоса ) элемента. Наклон элемента выглядит, как применение для него эффекта скоса. Функция принимает один или два аргумента: ax и ay . Оба являются значениями углов. Первое значение ( ах ) скашивает элемент вдоль оси х , а второй аргумент ( ау ) — вдоль оси у .

Скашивание вдоль оси х похоже на то, если бы мы потянули противоположные углы в противоположные стороны, а скашивание вдоль оси у — если бы мы потянули противоположные углы вертикально в противоположных направлениях ( вверх и вниз ). Два значения определяют величину, на которую скашивается элемент. Если второе значение не указано, оно считается равным 0 .

Функция transform skew CSS присутствовала в ранних версиях спецификации. Она был удалена из нее, но по-прежнему присутствует в некоторых реализациях. * Не используйте ее *. Чтобы скосить элемент в любом направлении, используйте функции skewX() и skewY() , описанные ниже. Также обратите внимание на то, что поведение функции skew() отличается от умножения преобразований skewX() и skewY() .

skewX()

Функция skewX() используется для наклона элемента. Наклон элемента выглядит, как применение для него эффекта скоса. В случае с skewX() , процесс похож на то, если бы мы захватили две противоположные вершины прямоугольника и потянули их в противоположных направлениях вдоль оси x , превращая прямоугольник в параллелограмм.

Функция принимает в качестве значения ax . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов ( ах ).

Если значение угла положительное, « растягиваются » левый верхний и нижний правый углы прямоугольника. Если значение отрицательное — верхний правый и нижний левый угол. При значении угла в 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

На приведенном ниже рисунке показан результат применения к изображению skewX() с положительным, а затем с отрицательным углом одной и той же величины:

Наклон элемента также искажает систему координат. Когда система координат скашивается, последовательные преобразования могут привести к неожиданным результатам, если не рассчитать их на основе новой системы координат. Узнать больше о системах координат в CSS и SVG можно здесь .

skewY()

Функция skewY() используется для наклона элемента. Наклон элемента выглядит, как применение для него эффекта скоса. В случае с skewY() , процесс похож на то, если бы мы захватили две противоположные вершины прямоугольника и потянули их в противоположных направлениях вдоль оси y , превращая прямоугольник в параллелограмм.

Функция CSS transform принимает в качестве значения ау . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов – ау .

Если значение угла положительное, « растягиваются » левый верхний и нижний правый угол прямоугольника. Если значение отрицательное — верхний правый и нижний левый. При значении угла 90 градусов ( или -90 градусов ) элемент исчезнет. Значение 180 градусов ( или -180 градусов ) оставит его без изменений.

На следующем рисунке показан результат применения к изображению skewY() с положительным, а затем с отрицательным углом одной и той же величины:

Следует помнить, что наклон элемента также искажает его систему координат.

matrix()

Функция matrix() используется для указания двухмерной матрицы преобразования. Она может быть использована для объединения нескольких преобразований в одно. Например, вместо использования двух ( или более ) функций преобразования ( смотрите выше ) в одном объявлении, например, следующим образом:

С помощью функции CSStransform matrix можно объединить эти два преобразования в одну матрицу:

Вычислить значения функции matrix3d() будет нелегко. К счастью, Эрик Мейер и Аарон Густафсон создали весьма полезный инструмент , который может выполнить расчеты вместо вас. Все, что нужно сделать, это ввести значения transform , которые вам нужны, и нажать на красную кнопку, чтобы инструмент сгенерировал для вас эквивалентную функцию matrix() .

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

translateZ()

Функция translateZ() используется для перемещения элемента на заданное расстояние вдоль оси z . Значение tz задается в единицах длины ( проценты здесь не допускаются ). Если единицы измерения не указаны, число будет рассматриваться, как « пользовательские единицы «.

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

translate3d()

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

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

scaleZ()

Функция scaleZ() используется для масштабирования элемента в третьем измерении, вдоль оси z . Она принимает в качестве значения число без единиц измерения sz , которое используется для изменения размеров элемента в соответствующем направлении.

Формально, scaleZ() масштабирует элемент вдоль оси z . Но фактически, это выглядит наподобие того, как если бы масштабировалась ( сжималась / растягивалась ) сама ось z , а затем элемент смещался бы вместе с осью после ее масштабирования.

Эффект CSS transform scaleZ более очевиден, когда у вас есть элемент с заданной перспективой, который вращается в трехмерном пространстве или перемещается вдоль оси z .

В первом примере у нас есть два элемента, которые расположены в трехмерном пространстве и перемещаются вдоль оси z с помощью функции translateZ() . Оба перемещаются на одинаковое расстояние. Затем мы масштабируем второй элемент ( правый ), используя scaleZ(2) . На следующем рисунке показан результат применения преобразований, а также разница между этими двумя элементами после масштабирования второго с помощью функции scaleZ .

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

Другой пример, на котором можно четко проследить эффект применения scaleZ . Два элемента сначала преобразуются одинаковым образом, но вместо перемещения в трехмерном пространстве мы вращаем их по оси х с помощью функции rotateX . Второй элемент ( справа ) был уменьшен по оси z с помощью функции scaleZ() . Обратите внимание, что он выглядит расположенным ближе к вам и, таким образом, больше:

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

scale3d()

Функция scale3d() является трехмерным аналогом функции scale() . Она используется для сжатия или растягивания элемента, делая его больше или меньше. Функция принимает в качестве значений три числа без единиц измерения: sx , sy , и sz . Где: sx масштабирует элемент по оси х , sy — по оси у , а sz — по оси z .

Если заданное значение больше 1 , элемент растягивается в соответствующих направлениях и будет выглядеть больше. Если значение равно 1 , то он остается неизменным ( в соответствующих направлениях ). Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допускаются, но они не масштабируют элемент. На самом деле отрицательные значения sx и sy поворачивают элемент по соответствующей оси.

rotate3d()

Функция rotate3d() является трехмерным аналогом функции CSS transform rotate . Она используется для вращения элемента в трехмерном пространстве. Элемент поворачивается на угол, который передается в качестве четвертого параметра. Первые три параметра определяют направление вращения, и вместе они образуют направление вектора [x, y, z] , который используется, чтобы применить вращение в заданном направлении.

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

На следующем рисунке показаны положительные направления вращения ( по часовой стрелке ) по трем осям:

Первые три параметра rotate3d() указывают направление вектора, вдоль которого будет происходить вращение, а угол — указывает направление: по часовой стрелке по вектору или против часовой стрелки.

На следующем рисунке показан результат применения к изображению преобразования rotate3d (1, 1, 1, 50deg); :

rotateX()

Функция rotateX() используется для вращения элемента вокруг оси х в трехмерном пространстве. Это эквивалентно:

где CSS transform rotate3d — это функция преобразования, используемая для вращения элемента в трехмерном пространстве.

Функция принимает в качестве значение угол. Элемент поворачивается на указанное значение вокруг оси х. Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное элемент — против часовой. Направление по часовой стрелке определяется, если смотреть на ось х с конца (где, как правило, размещается стрелка указателя направления) на начало координат.

На следующем рисунке показан результат применения к изображению rotateX(50deg) и rotateX(-50deg) :

rotateY()

Функция rotateY() используется для вращения элемента вокруг оси y в трехмерном пространстве. Это эквивалентно:

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

Функция принимает в качестве значения угол. Элемент поворачивается на указанное значение вокруг оси у . Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное — против часовой стрелки

На следующем рисунке показан результат применения к изображению rotateY(50deg) и rotateY(-50deg) :

rotateZ()

Функция CSS transform rotateZ() используется для вращения элемента вокруг оси z в трехмерном пространстве. Это эквивалентно:

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

Элемент поворачивается на указанное значение вокруг оси z . Если значение положительное, элемент поворачивается по часовой стрелке, если — против часовой стрелки.

Примеры:

На следующем рисунке показан результат применения к изображению rotateZ(50deg) и rotateZ(-50deg) :

matrix3d()

Функция matrix3d() является трехмерным эквивалентом функции matrix() . matrix3d() используется для объединения преобразований в одну матрицу и описания последовательностей трехмерных преобразований в сетке 4 ; 4 .

Например, вместо того, чтобы использовать две ( или более ) функции преобразования в одном объявлении следующим образом:

Можно объединить эти два преобразования в одну матрицу с помощью функции CSS transform matrix3d() :

perspective()

Техническое описание:

Функция perspective() задает матрицу перспективной проекции. Эта матрица масштабирует точки в X и Y , основываясь на их значениях Z , масштабируя точки с положительными значениями Z в направлении от начала координат, а с отрицательными значениями Z — в направлении к началу координат.

Точка на плоскости Z = 0 не изменяются. Значение длины, передаваемое в функцию, определяет расстояние от плоскости Z = 0 до зрителя. Более низкие значения дают более сплюснутую пирамиду и, следовательно, с перспективой эффект становится более выраженным. Например, значение длины 1000 пикселей в перспективе задает небольшие изменения, а значение 200 пикселей — намного большие. Значение глубины должно быть больше 0 , в противном случае функция является недействительной:

Функция CSS transform perspective() используется, чтобы задать глубину элемента, делая элементы, расположенные выше по оси z ( ближе к зрителю ), выглядящими больше, а элементы, расположенные дальше — выглядящими меньше. Чем меньше значение, тем ближе плоскость z к зрителю и тем больше выражен эффект. Чем выше значение, тем дальше от экрана расположен элемент и тем меньше наблюдаются изменения в перспективе.

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

Перспектива может быть применена с помощью функции perspective() или с помощью свойства perspective . Существует большая разница между этими двумя методами. Я лишь отмечу, что функция perspective() применяется к элементу, который трансформируется в 3D-пространстве , в то время как свойство perspective применяется к элементу, дочерние элементы которого в преобразуется в 3D-пространстве .

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

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

Функция perspective() принимает в качестве параметра значение длины. Чем меньше его значение, тем ближе плоскость z от зрителя, и тем более заметен эффект. Чем выше значение, тем дальше элемент от экрана и менее заметен эффект. На следующем рисунке показан результат применения к элементу разных значений perspective() :

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

Примечания

Элемент может быть перемещен с помощью свойства CSS position и его связанных свойств. Но лучше перемещать элемент с помощью функции CSS transform translate , потому что она задействует аппаратное ускорение и обеспечивает более высокую производительность. Функция translate3d() также иногда используется, чтобы применить аппаратное ускорение при анимировании элементов в WebKit-браузерах . Это позволяет создать более плавную анимацию.

Примеры

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

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

В этом transform CSS примере к элементу применяется перспектива с помощью функции perspective() :

Можно выполнить то же самое преобразование, но вместо того, чтобы применять к элементу перспективу, можно активировать в контейнере 3D-пространство :

Интерактивная демо-версия

Кликните по элементу в приведенной ниже демо-версии, чтобы увидеть его преобразование в трехмерном пространстве. Эффект преобразования применяется после клика с помощью JavaScript . При нажатии на элемент более одного раза переключается класс .transform , который содержит преобразования. CSS-переходы используются, чтобы сделать преобразование плавным.

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

Ниже приводится таблица поддержки двухмерных CSS-преобразований :

Поддержка 2D-преобразований CSS3

Метод преобразования элемента, включая вращение, масштабирование и т.д., включает поддержку свойства CSS transform , а также свойства transform-origin .

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

Стационарные Мобильные
Chrome 4 * Firefox

3.5 * IE 6 Opera 10. * Safari 3.1 * Chrome

3.2 * Firefox2.1 * IE 11 Opera 54 Safari 50 Поддержи-вается Поддержи-

вается Полифилл Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается

Ниже приводится таблица поддержки трехмерных преобразований CSS :

Поддержка 3D-преобразований CSS3

Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility для переключения отображения обратной стороны преобразуемого элемента.

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

Стационарные Мобильные
Chrome 12 * Firefox 10 * IE 15 * Opera 4 * Safari 3.1 * Chrome 3.2 * Firefox 3 * IE 37 Opera 54 Safari 50
Поддержи-вается Поддержи-вается Частично Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается Поддержи-вается

Данная публикация представляет собой перевод статьи « transform » , подготовленной дружной командой проекта Интернет-технологии.ру

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