phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add convex background transition

Browse Source
This commit is contained in:
Hakim El Hattab 2013-11-01 12:27:36 -04:00
parent 778969c000
commit d4e6fa12bf
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/reveal.css
View File

@ -1268,6 +1268,11 @@ body {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
} }
.reveal .slide-background { .reveal .slide-background {
position: absolute; position: absolute;
@ -1358,6 +1363,46 @@ body {
} }
/* Curve sliding transition style */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
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);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
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);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
opacity: 0;
-webkit-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0);
-moz-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0);
-ms-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
opacity: 0;
-webkit-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0);
-moz-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0);
-ms-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0);
transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0);
}
/* Global transition speed settings */ /* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background { .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
-webkit-transition-duration: 400ms; -webkit-transition-duration: 400ms;

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long