3D и CSS
Введение
Долгое время 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/