DOM 3D in pure CSS (WebKit 3D)

Re-implementing Mozilla Tilt in pure CSS.

Code: http://pastie.org/2251814


* {
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(20px);
background: rgba(255, 255, 255, .25);
outline: 1px solid rgba(0, 0, 0, .25);
}
html {
-webkit-transform: perspective(1200px) rotateY(5deg) translateZ(-500px);
-webkit-transition: -webkit-transform 1s ease-in-out;
}
html:hover {
-webkit-transform: perspective(1200px) rotateY(20deg) translateZ(-500px);
}
body { height: 100%; }

Category:

Science & Technology

Tags:

• css3
• webkit
• 3d
• dom
• transition
• hacking