fix vertical slide transition and hit areas of rolling links
This commit is contained in:
parent
233160ff23
commit
f9527d31b4
39
css/main.css
39
css/main.css
@ -138,6 +138,17 @@ h1 {
|
||||
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
#main section.present {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* DEFAULT THEME
|
||||
*********************************************/
|
||||
|
||||
#main section.past {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
@ -147,20 +158,6 @@ h1 {
|
||||
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* DEFAULT THEME
|
||||
*********************************************/
|
||||
|
||||
#main section.present {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
-webkit-transform-style: flat;
|
||||
-moz-transform-style: flat;
|
||||
transform-style: flat;
|
||||
}
|
||||
|
||||
#main section.future {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user