浏览代码

add convex background transition

Hakim El Hattab 11 年之前
父节点
当前提交
d4e6fa12bf
共有 2 个文件被更改,包括 45 次插入0 次删除
  1. 45 0
      css/reveal.css
  2. 0 0
      css/reveal.min.css

+ 45 - 0
css/reveal.css

@@ -1268,6 +1268,11 @@ body {
 	position: absolute;
 	width: 100%;
 	height: 100%;
+
+	-webkit-perspective: 600px;
+	   -moz-perspective: 600px;
+	    -ms-perspective: 600px;
+	        perspective: 600px;
 }
 	.reveal .slide-background {
 		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 */
 .reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
 	-webkit-transition-duration: 400ms;

文件差异内容过多而无法显示
+ 0 - 0
css/reveal.min.css


部分文件因为文件数量过多而无法显示