// https://github.com/h5bp/Effeckt.css .slide () { -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%; .slide(); } /* .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 ); } } */ //======================================================================= //======================================================================= //========================================================