Введение

Долгое время 3D было прерогативой настольных приложений. С появлением смартфонов, которые имели непосредственный доступ к аппаратной поддержке графики, мы стали видеть 3D практически везде.

Обычно 3D используется для создания игр или для проектирования сложных пользовательских интерфейсов, однако с появлением WPF (Windows Presentation Foundation) и Silverlight, в которых можно было применять 3D трансформации к любому элементу интерфейса, 3D стало доступно для обычных разработчиков программного обеспечения.

Модель 3D трансформации CSS была добавлена в спецификацию в марте 2009 чтобы позволить веб разработчикам создавать интересные и красивые пользовательские интерфейсы использующие все преимущества 3D . С этого момента к любому DOM элементу стало возможно применять 3D трансформации.

Модель 3D трансформаций CSS является логическим продолжением модели 2D трансформации CSS с некоторыми дополнениями.

Никогда раньше мы не могли создавать 3D интерфейсы так просто. Вам не нужно быть математиком чтобы создавать 3d элементы - все очень просто.

Стоит заметить что 3D трансформации добавлены в CSS для создания богатых и интересных приложений, однако они не предназначены для того чтобы создавать сложные 3D миры.

Поддержка браузерами и аппаратное ускорение

Chrome, Safari и Firefox уже сейчас поддерживают 3D трансформации.

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

Определение доступности в браузерах

Если определить обычную поддержку 3D в браузерах можно с помощью таких библиотек как modernizr, то аппаратное ускорение никак определить невозможно.

Простой пример

Давайте разберем просто пример. В этом примере мы повернем DOM элемент на какое-то количество градусов в двух плоскостях.

Сначала мы определим перспективу:

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

Затем мы добавим iframe и повернем его на 30 градусов по осям Y и Z:

<iframe src="http://www.html5blog.ru/"
style="-webkit-transform: rotate3d(0,1,1, 30deg)"></iframe>

Полученный элемент полностью функционирует, так как является DOM элементом, однако он повернут вокруг осей.

Если Ваш браузер не поддерживает 3D трансформаций, то ничего особенного Вы не увидите - будет отображен обычный iframe. Если Ваш браузер не поддерживает аппаратного ускорения, то картинка может выглядеть немного странно.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 100px 50px">
  <iframe src="http://www.html5blog.ru/"
   style="-webkit-transform: rotate3d(0,1,1, 30deg);
   transform: rotate3d(0,1,1, 30deg);"></iframe>
</div>

Анимирование

В CSS трансформациях очень легко создавать анимации и переходы. В следующем примере показано как можно сделать простейшую 3D анимацию:

Сначала изменим нашу перспективу:

<div id="anim1"> <iframe src="http://www.google.com/"></iframe></div>

А затем добавим несколько стилей:

<style>
 #anim1 {
  -webkit-perspective: 800;
  perspective: 800;
  margin: 100px 0 100px 50px;
 }

 #anim1 iframe {
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -webkit-transform: rotate3d(0,1,1, 30deg);
  transition: transform 1s ease-in-out;
  transform: rotate3d(0,1,1, 30deg);
 }

 #anim1 iframe:hover {
  -webkit-transform: rotate3d(0,0,1, 30deg);
  transform: rotate3d(0,0,1, 30deg);
 }
</style>

Добавив этот код в head вашего документа - Вы увидите что при наведении мыши на iframe - он немного разворачивается по оси Z.

Рабочий пример расположен по этой ссылке: http://html5blog.ru/examples/css-3d-transformation.php

Итог

Итак, мы с вами бегло прошлись по эффектам, которые можно применять ко всем DOM элементам используя CSS 3D трансформации. Помимо этих простых возможностей - в CSS еще очень богатый набор функций работы с 3D!

Список литературы

HTML5Rocks http://www.html5rocks.com/tutorials/3d/css/