Transform

26/09/2013

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

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

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

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

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

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

See the Pen CSS Transforms by yoksel (@yoksel) on CodePen.

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

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.

See the Pen CSS Transforms: transform-origin by yoksel (@yoksel) on CodePen.

Transform-style

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

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

flat — трансформируемый элемент плоский

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

See the Pen CSS Transforms: transform-style by yoksel (@yoksel) on CodePen.

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

overflow с любым значением кроме visible

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

filter с любым значением кроме none

Perspective

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

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

See the Pen CSS Transforms: perspective by yoksel (@yoksel) on CodePen.

Perspective-origin

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

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

See the Pen CSS Transforms: perspective-origin by yoksel (@yoksel) on CodePen.

Backface-visibility

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

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

visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию).

hidden — скрывать объект, если он повернут «спиной».

See the Pen CSS Transforms: backface-visibility by yoksel (@yoksel) on CodePen.

Ссылки по теме:: tympanus.net/Development/CreativeLinkEffects — интересный пример 3D-трансформации по наведению

Метки:: 3D,; трансформации