apply z position to slide container, rather than individual slides

1 files changed, 10 insertions, 4 deletions

diff --git a/js/reveal.js b/js/reveal.js
index 4d5fdd3..5805ee9 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -165,6 +165,9 @@
 		// The current scale of the presentation (see width/height config)
 		scale = 1,
 
+		// The current z position of the presentation container
+		z = 0,
+
 		// Cached references to DOM elements
 		dom = {},
 
@@ -1470,6 +1473,7 @@
 				// Prefer zooming in desktop Chrome so that content remains crisp
 				if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) {
 					dom.slides.style.zoom = scale;
+					transformElement( dom.slides, 'translateZ(-'+ z +'px)' );
 				}
 				// Apply scale transform as a fallback
 				else {
@@ -1477,7 +1481,7 @@
 					dom.slides.style.top = '50%';
 					dom.slides.style.bottom = 'auto';
 					dom.slides.style.right = 'auto';
-					transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' );
+					transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' + ' translateZ(-'+ z +'px)' );
 				}
 			}
 
@@ -1635,8 +1639,10 @@
 
 			var wasActive = dom.wrapper.classList.contains( 'overview' );
 
-			// Vary the depth of the overview based on screen size
-			var depth = window.innerWidth < 400 ? 1000 : 2500;
+			// Set the depth of the presentation. This determinse how far we
+			// zoom out and varies based on display size. It gets applied at
+			// the layout step.
+			z = window.innerWidth < 400 ? 1000 : 2500;
 
 			dom.wrapper.classList.add( 'overview' );
 			dom.wrapper.classList.remove( 'overview-deactivating' );
@@ -1653,7 +1659,7 @@
 					hbackground = horizontalBackgrounds[i],
 					hoffset = config.rtl ? -105 : 105;
 
-				var htransform = 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)';
+				var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)';
 
 				hslide.setAttribute( 'data-index-h', i );