3D in Safari
Submitted by clemens on Fri, 2011/07/22 - 2:47pm
I want to keep this goodie. Taken from http://www.youtube.com/user/unconed#p/a/u/0/2-oQj9Y9I6I and http://pastie.org/2251814
Place in a stylesheet in ~/Documents. Select as a custom stylesheet in the preferences.
* {
-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%; }