diff --git a/css/main.css b/css/main.css index e32c8c09..da482459 100644 --- a/css/main.css +++ b/css/main.css @@ -586,7 +586,7 @@ html { * BOX TRANSITION *********************************************/ -#reveal.box .slides { +#reveal.cube .slides { margin-top: -350px; -webkit-perspective-origin: 50% 25%; @@ -600,14 +600,14 @@ html { perspective: 1300px; } -#reveal.box .slides section { +#reveal.cube .slides section { padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - #reveal.box .slides section:not(.stack):before { + #reveal.cube .slides section:not(.stack):before { content: ''; position: absolute; display: block; @@ -624,7 +624,7 @@ html { -o-transform: translateZ( -20px ); transform: translateZ( -20px ); } - #reveal.box .slides section:not(.stack):after { + #reveal.cube .slides section:not(.stack):after { content: ''; position: absolute; display: block; @@ -645,12 +645,12 @@ html { transform: translateZ(-90px) rotateX( 65deg ); } -#reveal.box .slides>section.stack { +#reveal.cube .slides>section.stack { padding: 0; background: none; } -#reveal.box .slides>section.past { +#reveal.cube .slides>section.past { -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; @@ -662,7 +662,7 @@ html { transform: translate3d(-100%, 0, 0) rotateY(-90deg); } -#reveal.box .slides>section.future { +#reveal.cube .slides>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; @@ -674,7 +674,7 @@ html { transform: translate3d(100%, 0, 0) rotateY(90deg); } -#reveal.box .slides>section>section.past { +#reveal.cube .slides>section>section.past { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; @@ -686,7 +686,7 @@ html { transform: translate3d(0, -100%, 0) rotateX(90deg); } -#reveal.box .slides>section>section.future { +#reveal.cube .slides>section>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; diff --git a/index.html b/index.html index 93bb2dd5..8251079c 100644 --- a/index.html +++ b/index.html @@ -74,12 +74,20 @@

Holistic Overview

- Press SPACE to enter the slide overview. This allows you to navigate faster - in larger decks using the keyboard. + Press SPACE to enter the slide overview.

+
+ +
+

Transition Styles

- This feature is highly experimental and will be updated to boost performance. + You can select from different transitions, like:

+
@@ -218,7 +226,7 @@ theme: query.theme || 'default', // default/neon // Transition style - transition: query.transition || 'default' // default/box/page/concave/linear(2d), + transition: query.transition || 'default' // default/cube/page/concave/linear(2d), }); hljs.initHighlightingOnLoad(); diff --git a/js/reveal.js b/js/reveal.js index c3b5cc9f..5f99770e 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -134,6 +134,9 @@ var Reveal = (function(){ config.transition = options.transition === undefined ? 'default' : options.transition; config.theme = options.theme === undefined ? 'default' : options.theme; + // Transition alias + if( config.transition === 'box' ) config.transition = 'cube'; + // Fall back on the 2D transform theme 'linear' if( supports3DTransforms === false ) { config.transition = 'linear';