Webkit Tilt

webkit-tilt.bookmarklet.js

javascript:(function(){if (!document.getElementById('someuniqueid')){var objHead = document.getElementsByTagName('head'); if (objHead[0]){if (document.createElementNS && objHead[0].tagName == 'head') var objCSS = objHead[0].appendChild(document.createElementNS('http://www.w3.org/1999/xhtml', 'link')); else var objCSS = objHead[0].appendChild(document.createElement('link')); objCSS.id = 'someuniqueid'; objCSS.rel = 'stylesheet'; objCSS.href = 'data:text/css,*{-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s ease-in-out,box-shadow 1s ease-in-out,outline 1s ease-in-out}*:hover{background:rgba(255,255,255,.25);outline:1px solid rgba(0,0,0,.25);-webkit-transform:translateZ(100px);box-shadow:0 0 10px #cacaca}html{-webkit-transition:-webkit-transform 1s ease-in-out}html:hover{-webkit-transform:perspective(800px) rotateY(10deg) translateZ(-700px)}body{height:100%}'; objCSS.type = 'text/css';}}})()

webkit-tilt.css

/* WebKit Tilt
 * A CSS experiment inspired by Firefox Tilt
 * Original CSS from http://pastie.org/2251814 */

* {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s ease-in-out, box-shadow 1s ease-in-out, outline 1s ease-in-out;
}
*:hover {
  background: rgba(255, 255, 255, .25);
  outline: 1px solid rgba(0, 0, 0, .25);
  -webkit-transform: translateZ(50px);
  box-shadow:0px 0px 10px #cacaca;
}
html {
  -webkit-transition: -webkit-transform 1s ease-in-out;
}
html:hover {
  -webkit-transform: perspective(800px) rotateY(10deg) translateZ(-700px);
}
body { height: 100%; }