Transform

Содержание:
transform-origin
transform-style
perspective
perspective-origin
backface-visibility

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

Спецификация: www.w3.org/TR/css3-transforms/.

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

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

Примеры трансформаций:

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

transform: translateZ(5em) rotateY(90deg);

и

transform: rotateY(90deg) translateZ(5em);

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

transform: rotateY(45deg) rotateY(45deg);

повернет объект на 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 — скрывать объект, если он повернут “спиной”.

Кубик справа показывает действие backface-visibility: hidden:

Вдохновляющие эффекты с трансформами: tympanus.net/Development/CreativeLinkEffects/

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus