Browse Source

fix vertical slide transition and hit areas of rolling links

embed
Hakim El Hattab 13 years ago
parent
commit
f9527d31b4
  1. 37
      css/main.css
  2. 4
      index.html

37
css/main.css

@ -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;

4
index.html

@ -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

Loading…
Cancel
Save