*********************************************/
.reveal .roll {
- display: inline-block;
- line-height: 1.2;
- overflow: hidden;
+ display: inline-block;
+ line-height: 1.2;
+ overflow: hidden;
- vertical-align: top;
+ vertical-align: top;
- -webkit-perspective: 400px;
- -moz-perspective: 400px;
- -ms-perspective: 400px;
- perspective: 400px;
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px;
+ -ms-perspective: 400px;
+ perspective: 400px;
- -webkit-perspective-origin: 50% 50%;
- -moz-perspective-origin: 50% 50%;
- -ms-perspective-origin: 50% 50%;
- perspective-origin: 50% 50%;
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
}
.reveal .roll:hover {
background: none;
text-shadow: none;
}
.reveal .roll span {
- display: block;
- position: relative;
- padding: 0 2px;
+ display: block;
+ position: relative;
+ padding: 0 2px;
pointer-events: none;
- -webkit-transition: all 400ms ease;
- -moz-transition: all 400ms ease;
- -ms-transition: all 400ms ease;
- transition: all 400ms ease;
-
- -webkit-transform-origin: 50% 0%;
- -moz-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
-
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transform-style: preserve-3d;
-
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- backface-visibility: hidden;
-}
- .reveal .roll:hover span {
- background: rgba(0,0,0,0.5);
-
- -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
- -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
- -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
- transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
- }
+ -webkit-transition: all 400ms ease;
+ -moz-transition: all 400ms ease;
+ -ms-transition: all 400ms ease;
+ transition: all 400ms ease;
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+ .reveal .roll:hover span {
+ background: rgba(0,0,0,0.5);
+
+ -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ }
.reveal .roll span:after {
- content: attr(data-title);
+ content: attr(data-title);
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- padding: 0 2px;
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 0 2px;
- -webkit-transform-origin: 50% 0%;
- -moz-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
- -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
- -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
- -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
- transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+ -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+ -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+ -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+ transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
}
-ms-perspective: 600px;
perspective: 600px;
- -webkit-perspective-origin: 0% 25%;
- -moz-perspective-origin: 0% 25%;
- -ms-perspective-origin: 0% 25%;
- perspective-origin: 0% 25%;
+ -webkit-perspective-origin: 0% 25%;
+ -moz-perspective-origin: 0% 25%;
+ -ms-perspective-origin: 0% 25%;
+ perspective-origin: 0% 25%;
}
.reveal .slides>section,
width: 100%;
min-height: 600px;
- z-index: 10;
+ z-index: 10;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
margin-top: -350px;
-webkit-perspective-origin: 50% 25%;
- -moz-perspective-origin: 50% 25%;
- -ms-perspective-origin: 50% 25%;
- perspective-origin: 50% 25%;
+ -moz-perspective-origin: 50% 25%;
+ -ms-perspective-origin: 50% 25%;
+ perspective-origin: 50% 25%;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
background: rgba(0,0,0,0.1);
}
.reveal.overview .slides section .fragment {
- opacity: 1;
+ opacity: 1;
}
.reveal.overview .slides section:after,
.reveal.overview .slides section:before {