From e383aa1e2233974ceea94bf1eaa578f7cc810812 Mon Sep 17 00:00:00 2001 From: bbjay Date: Tue, 18 Sep 2012 19:38:01 +0200 Subject: [PATCH 1/2] non-blurry 3d perspective --- index.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index e3a3793..ef7d403 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@ x -= 90; break; } - cube.style[_config.transformProperty] = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'; + cube.style[_config.transformProperty] = 'translateZ(-160px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)'; }; })(); @@ -133,8 +133,9 @@ #stage { height: 100%; width: 100%; - /* workaround to make transformed elements accessible */ - -webkit-perspective: 999999; + -webkit-perspective: 800px; + -moz-perspective: 800px; + perspective: 800px; } #cube { @@ -151,6 +152,9 @@ -webkit-transition: all 300ms ease-in; transform-style: preserve-3d; transition: all 300ms ease-in; + -moz-transform: translateZ(-160px); + -webkit-transform: translateZ(-160px); + transform: translateZ(-160px); } .side { From 60e06cdf057c12ae9d21a84a22ea95507e211d7a Mon Sep 17 00:00:00 2001 From: bbjay Date: Tue, 18 Sep 2012 19:44:36 +0200 Subject: [PATCH 2/2] tweaked perspective origin --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index ef7d403..0c1e2aa 100644 --- a/index.html +++ b/index.html @@ -136,6 +136,9 @@ -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; + -webkit-perspective-origin: 50% 70%; + -moz-perspective-origin: 50% 70%; + perspective-origin: 50% 70%; } #cube {