From 20bea94ab6b91c85b171dcf86baba0a64169d508 Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Fri, 30 Aug 2013 15:56:53 +0000 Subject: First release of /delta version --- (limited to 'frontend/delta/less/web/behavior.less') diff --git a/frontend/delta/less/web/behavior.less b/frontend/delta/less/web/behavior.less new file mode 100644 index 0000000..f9d0a3c --- a/dev/null +++ b/frontend/delta/less/web/behavior.less @@ -0,0 +1,111 @@ +// 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 ); } +} +*/ +//======================================================================= + + +//======================================================================= + + + + + + + +//======================================================== -- cgit v0.9.0.2