CSS transform

Также как и 2-х мерное преобразование, 3-х мерное преобразование предоставляет свойства CSS transform и transform-origin, которые применяют геометрические преобразования к элементам HTML в CSS3. Функции преобразования rotate(), scale(), translate(), skew() и matrix(), охватывают трехмерное пространство с параметром z координаты как в matrix3d(), и дополнительных функций, например, rotateZ() и scaleZ().

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

3D преобразование так же добавляет несколько новых свойств в CSS3. В дополнение к свойствам transform и transform-origin браузер с поддержкой HTML5 и префиксами понимает свойства perspective, perspective-origin, backface-visibility и flat для значения transform-style.
не забывайте добавить префикс вашего браузера.

perspective

Функция преобразования perspective (перспектива) имеет важное значение для 3D преобразования. Без преобразования perspective нет восприятия глубины.

Example of css3 transform: perspective(500px) translate(0px, 0px, -300px); Example of css3 transform: translate(0px, 0px, -300px);
transform: perspective(500px) translate(0px, 0px, -300px); transform: translate(0px, 0px, -300px);
css3 transform: perspective(500px) rotateY(30deg); Example of css3 transform: rotateY(30deg);
transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg);

Можно применить преобразование с перспективой к нескольким элементам, используя свойство perspective к родительским элементам. Свойство perspective применит преобразование с перспективой к каждому дочернему элементу:

Example of two divs css3 transform by the same parent perspective property.
Иллюстрация свойства «перспектива+глубина»
#parent {
perspective: 500px;
}

#div1 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg);
}

#div2 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg) translate(220px);
}

Свойство perspective-origin также может использоваться в сочетании с perspective-depth глубина точки от центра элемента:

Иллюстрация perspective-depth css3 transform.
perspective-depth css3 transform

На рисунке ниже видно как происходит смещение слева от начала перспективы.

Example of two divs css3 transform by the same parent perspective-depth property.
Смещение слева от начала перспективы
#parent {
perspective: 500px;
perspective-origin: -300px 0px;
}

backface-visibility

Свойство backface-visibility полезно для скрытия одной из сторон backface. По умолчанию backface виден и  видно преобразование. Но, если backface-visibility присвоить значение hidden, содержание скрывается,  элемент поворачивается таким образом, чтобы сторона больше не была видимой. Это может пригодиться, если вы хотите имитировать объекты с несколькими сторонами, такие как карта в примере ниже.

CSS

.card, .card div {
position: absolute;
width: 102px;
height: 143px;
}
.card div:nth-child(1) {
background-image: url('redback.png');
}
.card div:nth-child(2) {
background-image: url('8clubs.png');
backface-visibility: hidden;
}

HTML для одной карты:

<div class="card">
  <div></div>
  <div></div>
</div>

На рисунке шести картам, определён стиль style="transform: rotateY(ndeg)" со значением n, где n поворот в градусах, вот примеры:

Преобразование css3 transform 0 градусов. Преобразование css3 transform 36 градусов. Преобразование css3 transform 72 градуса. Преобразование css3 transform 108 градусов. Преобразование css3 transform 144 градуса. Преобразование css3 transform 180 градусов.
rotateY(0deg); rotateY(36deg); rotateY(72deg); rotateY(108deg); rotateY(144deg); rotateY(180deg);

В примере, где нет вращения, мы видим второй div, карта восьмерка треф, поскольку она лежит первой в колоде. После применения к карте вращения на 90 градусов и более, свойство backface-visibility: hidden; второго div сначала сделает ее невидимой, а затем отобразит первый div, тыльную сторону карты.

Трехмерные преобразования

Особо радует что трехмерные преобразования можно использовать даже в сочетании с анимацией и переходами CSS. Если вы используете Internet Explorer 10 или другой браузер с поддержкой анимации CSS3 или трехмерных преобразований CSS3, изучите этот пример прокрутки текста, созданный с помощью анимации и свойства transform.

Трехмерные преобразования с CSS3 анимацией и переходами
Трехмерные преобразования с анимацией и переходами

Инструмент 3D преобразований

Поддержка