Стивен Виттенс переработал свой сайт 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>
UPD: Перезалил полную версию CSS — forum.xeksec.com/habr/3d/combo.css
JS — forum.xeksec.com/habr/3d/combo.js
