В наше время во всех современных браузерах есть поддержка 3D позиционирования html элементов. При этом используется специфическое свойство CSS , определенное для каждого браузера. На пример, для Firefox это свойство начинается с -moz , для Оперы -o , для webkit браузеров (Chrome , Safari ) -webkit .
Именно поэтому в этом посте были собраны примеры 3D , выполненные с помощью CSS . Впрочем некоторые из примеров все-таки используют Javascript .
3D иконка Супер Марио
[w2button class="demo" href="http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/" title="Пример"]
3D слайд-шоу
[w2button class="demo" href="http://nettuts.s3.amazonaws.com/893_css3D/source_files/index.html" title="Пример"]
WebKit CSS 3D DB Демо
[w2button class="demo" href="http://girliemac.com/sandbox/flickr_3d.html" title="Пример"]
3D полет изображения
[w2button class="demo" href="http://web.me.com/pzich/3DImageFly/" title="Пример"]
Построение 3D города на CSS
[w2button class="demo" href="http://cubiq.org/building-a-pure-css-3d-city/" title="Руководство (eng.)"] [w2button class="demo" href="http://cubiq.org/dropbox/3dcity/" title="Пример"]
Вращающийся цветной куб
[w2button class="demo" href="http://css-3d.org/color-cube-outside-and-inside-the-box.htm" title="Пример"]
Шипы
[w2button class="demo" href="http://lab.aerotwist.com/css/spikes/" title="Пример"]
Вращающийся космический куб
[w2button class="demo" href="http://css-3d.org/space-cube-2.htm" title="Пример"]
Неоновый 3D глобус
[w2button class="demo" href="http://themaninblue.com/experiment/slashGlobe/" title="Пример"]
Снежный стек
[w2button class="demo" href="http://www.satine.org/research/webkit/snowleopard/snowstack.html" title="Пример"]
Создание сферы с помощью 3D CSS
[w2button class="demo" href="http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/" title="Руководство (eng.)"] [w2button class="demo" href="http://www.paulrhayes.com/experiments/sphere/" title="Пример"]
Чистая 3D карусель на CSS
[w2button class="demo" href="http://www.kaizou.org/2011/08/pure-css-3d-carousel/" title="Пример"]
CSS 3D голограмма
[w2button class="demo" href="http://hakim.se/experiments/css/holobox/" title="Пример"]
3D вращающаяся молекула
[w2button class="demo" href="http://blog.jackadam.net/2010/3d-rotating-molecules-on-the-iphoneipad/" title="Руководство (eng.)"] [w2button class="demo" href="http://demos.jackadam.net/webkit_molecule/" title="Пример"]
Игральные кости
[w2button class="demo" href="http://jsdo.it/t02uk/xR7c" title="Пример"]
Цветок
[w2button class="demo" href="http://minimal.be/lab/Sprite3D/examples/hoverFlowerExample.html" title="Пример"]
Галерея изображений
[w2button class="demo" href="http://minimal.be/lab/Sprite3D/examples/galleryExample.html" title="Пример"]
Бабочки
[w2button class="demo" href="http://minimal.be/lab/Sprite3D/butterflies/" title="Пример"]
