Hi People, recently i added new Css Page Transition from jQTouch:
- .viewport-cube {
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
position: absolute;
}
.cube{
-webkit-animation-duration: .55s;
}
.cube.in {
-webkit-transform-origin: 100% 50%;
-webkit-animation-name: cubeLeftIn;
}
.cube.out {
-webkit-transform-origin: 0% 50%;
-webkit-animation-name: cubeLeftOut;
}
@-webkit-keyframes cubeLeftIn {
0% {
-webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
opacity: .5;
}
100% {
-webkit-transform: rotateY(00deg) translateZ(0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes cubeLeftOut {
0% {
-webkit-transform: rotateY(0deg) translateX(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
opacity: .5;
}
}
.cube.in.reverse {
-webkit-transform-origin: 0% 50%;
-webkit-animation-name: cubeRightIn;
}
.cube.out.reverse {
-webkit-transform-origin: 100% 50%;
-webkit-animation-name: cubeRightOut;
}
@-webkit-keyframes cubeRightIn {
0% {
-webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
opacity: .5;
}
100% {
-webkit-transform: rotateY(0deg) translateZ(0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes cubeRightOut {
0% {
-webkit-transform: rotateY(0deg) translateX(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
opacity: .5;
}
}
- $.mobile.defaultPageTransition = 'cube';
I hope that this code will be useful for someone.
Grettings from Spain ;)
Edit: Sorry, i choosed "Ask a Question" instead "Start a discussion", a newbie mistake.