Pull to refresh

CSS 3D эффекты

Reading time2 min
Views14K

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

Чтобы увидеть 3D в действии вам надо использовать браузер WebKit (Safari или Chrome) т.к. пока только они поддерживают CSS 3D эффекты. В других браузерах, которые еще не поддерживают 3D эффекты сайт все равно нормально просматривается. Чтобы увидеть полный 3D эффект обязательно прокрутите страницу.

Виттенс в своем блоге подробно написал как он создал 3D эффекты и даже сделал 3D редактор, с которым вы можете поиграть.



Чтобы обойти некоторые ограничения CSS в браузерах Виттенс применил Three.js — JavaScript 3D библиотека, написана Рикардо Кабелло (его знаменитый проект Harmony). Для тех кто заинтересован в исходных кодах некоторых преобразований на Acko.net, Виттенс пообещал выпустить его на GitHub в ближайшее время.

Потестить можно с этим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="author" content="Steven Wittens">
    <link rel="stylesheet" href="http://acko.net/cache/combo.css" type="text/css" media="all" charset="utf-8" />
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" src="http://acko.net/cache/combo.js"></script>
    <script type="text/javascript" src="http://use.typekit.com/nde6wmn.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <script type="text/html" id="template-site-name" charset="utf-8">
        <h1 class="site-name">Habrahabr</h1>
    </script>
</head>
<body>
<div class="css3d-support"></div>  
<div class="voila"></div>
<div class="perspective">
    <header><div id="hackery"></div></header>
    <div class="spacer"></div>
</div>
</body>
</html>


CSS код в нормальном виде можно взять здесь, JS здесь.
UPD: Перезалил полную версию CSS — forum.xeksec.com/habr/3d/combo.css
JS — forum.xeksec.com/habr/3d/combo.js
Tags:
Hubs:
Total votes 35: ↑31 and ↓4+27
Comments49

Articles