2013-08-30 17:56:53 +02:00
|
|
|
// https://github.com/h5bp/Effeckt.css
|
|
|
|
|
|
|
|
|
2013-10-02 09:59:30 +02:00
|
|
|
@mixin slide () {
|
2013-08-30 17:56:53 +02:00
|
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
|
|
|
|
&.left {
|
|
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
|
|
transform: translate3d(-100%, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.center {
|
|
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.right {
|
|
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
|
visibility: hidden;
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
&.transition {
|
|
|
|
visibility: visible;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.transition {
|
|
|
|
-webkit-transition-duration: .25s;
|
|
|
|
transition-duration: .25s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
|
|
|
|
.page {
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
2013-10-02 09:59:30 +02:00
|
|
|
@include slide();
|
2013-08-30 17:56:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
.registrationForm {
|
|
|
|
.steps {
|
|
|
|
.step {
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
// top: 0;
|
|
|
|
// left: 0;
|
|
|
|
// width: 100%;
|
|
|
|
// height: 100%;
|
|
|
|
|
|
|
|
.slide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
|
|
|
//----------------------------------------------------------------------
|
|
|
|
// tentative 3D transformations
|
|
|
|
/*
|
|
|
|
.page {
|
|
|
|
transform: rotateY( 0deg) translateZ( 100px);
|
|
|
|
|
|
|
|
&.left {
|
|
|
|
transform: rotateY( -90deg) translateZ( 100px);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.center {
|
|
|
|
transform: rotateY( 0deg) translateZ( 100px);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.right {
|
|
|
|
transform: rotateY( 90deg) translateZ( 100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#mainDiv {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
|
|
|
transition: transform 3s;
|
|
|
|
|
|
|
|
&.show-front { transform: translateZ( -100px ) rotateY( 0deg ); }
|
|
|
|
&.show-back { transform: translateZ( -100px ) rotateX( -180deg ); }
|
|
|
|
&.show-right { transform: translateZ( -100px ) rotateY( -90deg ); }
|
|
|
|
&.show-left { transform: translateZ( -100px ) rotateY( 90deg ); }
|
|
|
|
&.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
|
|
|
|
&.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
//=======================================================================
|
|
|
|
|
|
|
|
|
|
|
|
//=======================================================================
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//========================================================
|