CSS 3D effects
Stephen Wittens redesigned his Acko.net site. Wittens used CSS 3 3D features and a small portion of JavaScript to create a stunning 3D page header.
To see 3D in action you need to use WebKit (Safari or Chrome) because while only they support CSS 3D effects. In other browsers that do not yet support 3D effects, the site is still viewed normally. To see the full 3D effect, be sure to scroll the page.
Wittens in his blog wrote in detail how he created 3D effects and even made a 3D editor with which you can play .
')
To get around some of the CSS limitations in browsers, Wittens applied Three.js — a JavaScript 3D library written by Ricardo Cabello (his famous project Harmony ). For those who are interested in the source codes of some transformations on Acko.net, Wittens promised to release it on GitHub soon.
You can test with this code:
<!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: Perezalil full version of CSS - forum.xeksec.com/habr/3d/combo.css
JS - forum.xeksec.com/habr/3d/combo.js
Source: https://habr.com/ru/post/136475/
All Articles