first
This commit is contained in:
702
safekiso-server/modules/base/wwwroot/admindek/bower_components/stroll/css/stroll.css
vendored
Normal file
702
safekiso-server/modules/base/wwwroot/admindek/bower_components/stroll/css/stroll.css
vendored
Normal file
@@ -0,0 +1,702 @@
|
||||
/*!
|
||||
* stroll.js 1.2 - CSS scroll effects
|
||||
* http://lab.hakim.se/scroll-effects
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Shrink styles
|
||||
*/
|
||||
.cards {
|
||||
-webkit-perspective: 300px;
|
||||
-moz-perspective: 300px;
|
||||
-ms-perspective: 300px;
|
||||
-o-perspective: 300px;
|
||||
perspective: 300px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.cards li {
|
||||
-webkit-transition: all 600ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease;
|
||||
-o-transition: all 600ms ease;
|
||||
transition: all 600ms ease;
|
||||
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
-moz-transform-origin: 100% 50%;
|
||||
-ms-transform-origin: 100% 50%;
|
||||
-o-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
.cards li.past {
|
||||
-webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
|
||||
-moz-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
|
||||
-ms-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
|
||||
-o-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
|
||||
transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
|
||||
}
|
||||
.cards li.future {
|
||||
-webkit-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
|
||||
-moz-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
|
||||
-ms-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
|
||||
-o-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
|
||||
transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Grow styles
|
||||
*/
|
||||
.grow li {
|
||||
-webkit-transition: all 600ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease;
|
||||
-o-transition: all 600ms ease;
|
||||
transition: all 600ms ease;
|
||||
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.grow li.past {
|
||||
-webkit-transform: scale( 0.01 );
|
||||
-moz-transform: scale( 0.01 );
|
||||
-ms-transform: scale( 0.01 );
|
||||
-o-transform: scale( 0.01 );
|
||||
transform: scale( 0.01 );
|
||||
}
|
||||
.grow li.future {
|
||||
-webkit-transform: scale( 0.01 );
|
||||
-moz-transform: scale( 0.01 );
|
||||
-ms-transform: scale( 0.01 );
|
||||
-o-transform: scale( 0.01 );
|
||||
transform: scale( 0.01 );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Flip styles
|
||||
*/
|
||||
.flip {
|
||||
-webkit-perspective: 400px;
|
||||
-moz-perspective: 400px;
|
||||
-ms-perspective: 400px;
|
||||
-o-perspective: 400px;
|
||||
perspective: 400px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.flip li {
|
||||
-webkit-transition: all 600ms ease,
|
||||
opacity 300ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease,
|
||||
opacity 300ms ease;
|
||||
-o-transition: all 600ms ease,
|
||||
opacity 300ms ease;
|
||||
transition: all 600ms ease,
|
||||
opacity 300ms ease;
|
||||
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
.flip li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
-moz-transform-origin: 0% 100%;
|
||||
-ms-transform-origin: 0% 100%;
|
||||
-o-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
|
||||
-webkit-transform: rotateX( 80deg );
|
||||
-moz-transform: rotateX( 80deg );
|
||||
-ms-transform: rotateX( 80deg );
|
||||
-o-transform: rotateX( 80deg );
|
||||
transform: rotateX( 80deg );
|
||||
}
|
||||
.flip li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( -80deg );
|
||||
-moz-transform: rotateX( -80deg );
|
||||
-ms-transform: rotateX( -80deg );
|
||||
-o-transform: rotateX( -80deg );
|
||||
transform: rotateX( -80deg );
|
||||
}
|
||||
|
||||
/**
|
||||
* Fly styles
|
||||
*/
|
||||
.fly {
|
||||
-webkit-perspective: 400px;
|
||||
-moz-perspective: 400px;
|
||||
-ms-perspective: 400px;
|
||||
-o-perspective: 400px;
|
||||
perspective: 400px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.fly li {
|
||||
-webkit-transition: all 600ms ease, opacity 300ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease, opacity 300ms ease;
|
||||
-o-transition: all 600ms ease, opacity 300ms ease;
|
||||
transition: all 600ms ease, opacity 300ms ease;
|
||||
|
||||
-webkit-transform-origin: 50% 50% -50px;
|
||||
-moz-transform-origin: 50% 50% -50px;
|
||||
-ms-transform-origin: 50% 50% -50px;
|
||||
-o-transform-origin: 50% 50% -50px;
|
||||
transform-origin: 50% 50% -50px;
|
||||
}
|
||||
.fly li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( 180deg );
|
||||
-moz-transform: rotateX( 180deg );
|
||||
-ms-transform: rotateX( 180deg );
|
||||
-o-transform: rotateX( 180deg );
|
||||
transform: rotateX( 180deg );
|
||||
}
|
||||
.fly li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( -180deg );
|
||||
-moz-transform: rotateX( -180deg );
|
||||
-ms-transform: rotateX( -180deg );
|
||||
-o-transform: rotateX( -180deg );
|
||||
transform: rotateX( -180deg );
|
||||
}
|
||||
|
||||
.fly-simplified {
|
||||
-webkit-perspective: 300px;
|
||||
-moz-perspective: 300px;
|
||||
-ms-perspective: 300px;
|
||||
-o-perspective: 300px;
|
||||
perspective: 300px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.fly-simplified li {
|
||||
-webkit-transition: all 600ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease;
|
||||
-o-transition: all 600ms ease;
|
||||
transition: all 600ms ease;
|
||||
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
-moz-transform-origin: 100% 50%;
|
||||
-ms-transform-origin: 100% 50%;
|
||||
-o-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
.fly-simplified li.past {
|
||||
-webkit-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
|
||||
-moz-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
|
||||
-ms-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
|
||||
-o-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
|
||||
transform: translate3d( 0, -100px, -100px ) rotateX( 90deg );
|
||||
}
|
||||
.fly-simplified li.future {
|
||||
-webkit-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
|
||||
-moz-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
|
||||
-ms-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
|
||||
-o-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
|
||||
transform: translate3d( 0, 100px, -100px ) rotateX( -90deg );
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse fly styles
|
||||
*/
|
||||
.fly-reverse {
|
||||
-webkit-perspective: 400px;
|
||||
-moz-perspective: 400px;
|
||||
-ms-perspective: 400px;
|
||||
-o-perspective: 400px;
|
||||
perspective: 400px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.fly-reverse li {
|
||||
-webkit-transition: all 600ms ease, opacity 300ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease, opacity 300ms ease;
|
||||
-o-transition: all 600ms ease, opacity 300ms ease;
|
||||
transition: all 600ms ease, opacity 300ms ease;
|
||||
|
||||
-webkit-transform-origin: 50% 50% -50px;
|
||||
-moz-transform-origin: 50% 50% -50px;
|
||||
-ms-transform-origin: 50% 50% -50px;
|
||||
-o-transform-origin: 50% 50% -50px;
|
||||
transform-origin: 50% 50% -50px;
|
||||
}
|
||||
.fly-reverse li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( -180deg );
|
||||
-moz-transform: rotateX( -180deg );
|
||||
-ms-transform: rotateX( -180deg );
|
||||
-o-transform: rotateX( -180deg );
|
||||
transform: rotateX( -180deg );
|
||||
}
|
||||
.fly-reverse li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateX( 180deg );
|
||||
-moz-transform: rotateX( 180deg );
|
||||
-ms-transform: rotateX( 180deg );
|
||||
-o-transform: rotateX( 180deg );
|
||||
transform: rotateX( 180deg );
|
||||
}
|
||||
|
||||
/**
|
||||
* Skew
|
||||
*/
|
||||
.skew {
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
-ms-perspective: 600px;
|
||||
-o-perspective: 600px;
|
||||
perspective: 600px;
|
||||
|
||||
-webkit-perspective-origin: 0% 50%;
|
||||
-moz-perspective-origin: 0% 50%;
|
||||
-ms-perspective-origin: 0% 50%;
|
||||
-o-perspective-origin: 0% 50%;
|
||||
perspective-origin: 0% 50%;
|
||||
}
|
||||
.skew li {
|
||||
-webkit-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease;
|
||||
-o-transition: all 600ms ease;
|
||||
transition: all 600ms ease;
|
||||
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
.skew li.past {
|
||||
-webkit-transform: skewY( 30deg );
|
||||
-moz-transform: skewY( 30deg );
|
||||
-ms-transform: skewY( 30deg );
|
||||
-o-transform: skewY( 30deg );
|
||||
transform: skewY( 30deg );
|
||||
}
|
||||
.skew li.future {
|
||||
z-index: 0;
|
||||
|
||||
-webkit-transform: skewY( -30deg );
|
||||
-moz-transform: skewY( -30deg );
|
||||
-ms-transform: skewY( -30deg );
|
||||
-o-transform: skewY( -30deg );
|
||||
transform: skewY( -30deg );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Helix styles
|
||||
*/
|
||||
.helix {
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
-ms-perspective: 600px;
|
||||
-o-perspective: 600px;
|
||||
perspective: 600px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.helix li {
|
||||
-webkit-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-o-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.helix li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateY( 180deg );
|
||||
-moz-transform: rotateY( 180deg );
|
||||
-ms-transform: rotateY( 180deg );
|
||||
-o-transform: rotateY( 180deg );
|
||||
transform: rotateY( 180deg );
|
||||
}
|
||||
.helix li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateY( -180deg );
|
||||
-moz-transform: rotateY( -180deg );
|
||||
-ms-transform: rotateY( -180deg );
|
||||
-o-transform: rotateY( -180deg );
|
||||
transform: rotateY( -180deg );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Wave styles
|
||||
*/
|
||||
.wave li {
|
||||
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
.wave li.past {
|
||||
-webkit-transform: translateX( -70% );
|
||||
-moz-transform: translateX( -70% );
|
||||
-ms-transform: translateX( -70% );
|
||||
-o-transform: translateX( -70% );
|
||||
transform: translateX( -70% );
|
||||
}
|
||||
.wave li.future {
|
||||
-webkit-transform: translateX( -70% );
|
||||
-moz-transform: translateX( -70% );
|
||||
-ms-transform: translateX( -70% );
|
||||
-o-transform: translateX( -70% );
|
||||
transform: translateX( -70% );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Fan styles
|
||||
*/
|
||||
.fan li {
|
||||
-webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
.fan li.past {
|
||||
-webkit-transform: rotate( -60deg );
|
||||
-moz-transform: rotate( -60deg );
|
||||
-ms-transform: rotate( -60deg );
|
||||
-o-transform: rotate( -60deg );
|
||||
transform: rotate( -60deg );
|
||||
}
|
||||
.fan li.future {
|
||||
-webkit-transform: rotate( 70deg );
|
||||
-moz-transform: rotate( 70deg );
|
||||
-ms-transform: rotate( 70deg );
|
||||
-o-transform: rotate( 70deg );
|
||||
transform: rotate( 70deg );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tilt styles
|
||||
*/
|
||||
.tilt {
|
||||
-webkit-perspective: 800px;
|
||||
-moz-perspective: 800px;
|
||||
-ms-perspective: 800px;
|
||||
-o-perspective: 800px;
|
||||
perspective: 800px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.tilt li {
|
||||
position: relative;
|
||||
|
||||
-webkit-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
opacity 300ms ease;
|
||||
-moz-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-ms-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
opacity 300ms ease;
|
||||
-o-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
opacity 300ms ease;
|
||||
transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
|
||||
opacity 300ms ease;
|
||||
}
|
||||
.tilt li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: translateY( 100% ) translateZ(-200px);
|
||||
-moz-transform: translateY( 100% ) translateZ(-200px);
|
||||
-ms-transform: translateY( 100% ) translateZ(-200px);
|
||||
-o-transform: translateY( 100% ) translateZ(-200px);
|
||||
transform: translateY( 100% ) translateZ(-200px);
|
||||
}
|
||||
.tilt li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: translateY( -100% ) translateZ(-200px);
|
||||
-moz-transform: translateY( -100% ) translateZ(-200px);
|
||||
-ms-transform: translateY( -100% ) translateZ(-200px);
|
||||
-o-transform: translateY( -100% ) translateZ(-200px);
|
||||
transform: translateY( -100% ) translateZ(-200px);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Curl styles
|
||||
*/
|
||||
.curl {
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
-ms-perspective: 600px;
|
||||
-o-perspective: 600px;
|
||||
perspective: 600px;
|
||||
|
||||
-webkit-perspective-origin: 0% 50%;
|
||||
-moz-perspective-origin: 0% 50%;
|
||||
-ms-perspective-origin: 0% 50%;
|
||||
-o-perspective-origin: 0% 50%;
|
||||
perspective-origin: 0% 50%;
|
||||
}
|
||||
|
||||
.curl li {
|
||||
-webkit-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-o-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-o-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.curl li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateY( 90deg );
|
||||
-moz-transform: rotateY( 90deg );
|
||||
-ms-transform: rotateY( 90deg );
|
||||
-o-transform: rotateY( 90deg );
|
||||
transform: rotateY( 90deg );
|
||||
}
|
||||
.curl li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotateY( 90deg );
|
||||
-moz-transform: rotateY( 90deg );
|
||||
-ms-transform: rotateY( 90deg );
|
||||
-o-transform: rotateY( 90deg );
|
||||
transform: rotateY( 90deg );
|
||||
}
|
||||
|
||||
|
||||
.papercut {
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
-ms-perspective: 600px;
|
||||
-o-perspective: 600px;
|
||||
perspective: 600px;
|
||||
|
||||
-webkit-perspective-origin: 0% 0%;
|
||||
-moz-perspective-origin: 0% 0%;
|
||||
-ms-perspective-origin: 0% 0%;
|
||||
-o-perspective-origin: 0% 0%;
|
||||
perspective-origin: 0% 0%;
|
||||
}
|
||||
.papercut li {
|
||||
-webkit-transition: all 600ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease;
|
||||
-o-transition: all 600ms ease;
|
||||
transition: all 600ms ease;
|
||||
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-o-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
.papercut li.past {
|
||||
-webkit-transform: skewY( -30deg );
|
||||
-moz-transform: skewY( -30deg );
|
||||
-ms-transform: skewY( -30deg );
|
||||
-o-transform: skewY( -30deg );
|
||||
transform: skewY( -30deg );
|
||||
}
|
||||
.papercut li.future {
|
||||
-webkit-transform: skewY( 30deg );
|
||||
-moz-transform: skewY( 30deg );
|
||||
-ms-transform: skewY( 30deg );
|
||||
-o-transform: skewY( 30deg );
|
||||
transform: skewY( 30deg );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Zipper styles
|
||||
*/
|
||||
.zipper li {
|
||||
-webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
-o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
-moz-transform-origin: 50% 0%;
|
||||
-ms-transform-origin: 50% 0%;
|
||||
-o-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
.zipper li.past:nth-child(odd),
|
||||
.zipper li.future:nth-child(odd) {
|
||||
-webkit-transform: translateX( 80% );
|
||||
-moz-transform: translateX( 80% );
|
||||
-ms-transform: translateX( 80% );
|
||||
-o-transform: translateX( 80% );
|
||||
transform: translateX( 80% );
|
||||
}
|
||||
.zipper li.past:nth-child(even),
|
||||
.zipper li.future:nth-child(even) {
|
||||
-webkit-transform: translateX( -80% );
|
||||
-moz-transform: translateX( -80% );
|
||||
-ms-transform: translateX( -80% );
|
||||
-o-transform: translateX( -80% );
|
||||
transform: translateX( -80% );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Fade styles
|
||||
*/
|
||||
.fade li {
|
||||
-webkit-transition: opacity .35s ease-in-out;
|
||||
-moz-transition: opacity .35s ease-in-out;
|
||||
-ms-transition: opacity .35s ease-in-out;
|
||||
-o-transition: opacity .35s ease-in-out;
|
||||
transition: opacity .35s ease-in-out;
|
||||
}
|
||||
.fade li.past {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade li.future {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Twirl styles
|
||||
*/
|
||||
.twirl {
|
||||
-webkit-perspective: 400px;
|
||||
-moz-perspective: 400px;
|
||||
-ms-perspective: 400px;
|
||||
-o-perspective: 400px;
|
||||
perspective: 400px;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%;
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
-o-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.twirl li {
|
||||
-webkit-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-moz-transition: all 600ms ease;
|
||||
-ms-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
-o-transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
transition: all 600ms ease,
|
||||
opacity 200ms ease;
|
||||
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.twirl li.past {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotate3d( 80,-70,10,180deg );
|
||||
-moz-transform: rotate3d( 80,70,10,180deg );
|
||||
-ms-transform: rotate3d( 80,70,10,180deg );
|
||||
-o-transform: rotate3d( 80,70,10,180deg );
|
||||
transform: rotate3d( 80,70,10,180deg );
|
||||
}
|
||||
.twirl li.future {
|
||||
opacity: 0;
|
||||
|
||||
-webkit-transform: rotate3d( 80,70,10,-180deg );
|
||||
-moz-transform: rotate3d( 80,70,10,-180deg );
|
||||
-ms-transform: rotate3d( 80,70,10,-180deg );
|
||||
-o-transform: rotate3d( 80,70,10,-180deg );
|
||||
transform: rotate3d( 80,70,10,-180deg );
|
||||
}
|
||||
Reference in New Issue
Block a user