xobs/fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix vertical slide transition and hit areas of rolling links

Browse Source
This commit is contained in:
Hakim El Hattab 2011-12-04 19:24:08 -08:00
parent 233160ff23
commit f9527d31b4
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/main.css
View File

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

4
index.html
View File

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