Commit f9527d31 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

fix vertical slide transition and hit areas of rolling links

parent 233160ff
......@@ -138,27 +138,24 @@ h1 {
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#main section.past {
#main section.present {
display: block;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
position: absolute;
z-index: 10;
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.present {
#main section.past {
display: block;
position: absolute;
z-index: 10;
-webkit-transform-style: flat;
-moz-transform-style: flat;
transform-style: flat;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
#main section.future {
......@@ -204,6 +201,17 @@ h1 {
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.concave #main section>section.past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
.concave #main section>section.future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/*********************************************
* LINEAR THEME
......@@ -433,7 +441,6 @@ img {
}
/*********************************************
* ROLLING LINKS
*********************************************/
......@@ -461,6 +468,8 @@ img {
position: relative;
padding: 0 2px;
pointer-events: none;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
......
......@@ -21,7 +21,7 @@
<section>
<h1>Reveal.js</h1>
<h3 class="inverted">With 3D effects. And stuff.</h3>
<h3 class="inverted">A CSS 3D Slideshow</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
......@@ -183,7 +183,7 @@ linkify( 'a' );
controls: true,
// Apply a 3D roll to links on hover
rollingLinks: false,
rollingLinks: true,
// Styling themes, only affects transitions for now
theme: 'default' // default/concave/linear
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment