Search jQuery

jQuery Forum

jQuery Mobile

oscar.mem..

Cube Page Transition from jQTouch

in jQuery Mobile • 10 years ago

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.

Replies(4)

greymatte..

Re: Cube Page Transition from jQTouch

10 years ago

This is great, but I not you're only using webkit-specific code.

I guess as long as you don't want to use this on non-webkit browsers, it will probably work just fine.

oscar.mem..

Re: Cube Page Transition from jQTouch

10 years ago

You're right, I have focused on iPhone and Android (i'm developing a PhoneGap app), but the css is easily adaptable to other HTML5 browsers.

In Android Virtual Device the perspective don't works very well (3d transformations doesn't work how i expect), i will try it on Samsung Gallaxy, if i find bugs, i'll edit the post with improvements.

greymatte..

Re: Re: Cube Page Transition from jQTouch

10 years ago

As noted on jQuery Mobile's own page about page transitions:

http://jquerymobile.com/demos/1.0b3/docs/pages/page-transitions.html

NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.

I imagine it would be the same with the cube transition, especially a webkit-based one.

watusiware

Re: Cube Page Transition from jQTouch

10 years ago

I can't seem to get this to work with either JQuery Mobile 1.01 or 1.1RC2. I must be missing something obvious. In both cases, I just get a fade transition, so it's not the transition changes that were made to 1.1RC2.

I can see the correct classes being applied to the entering and exiting pages using Safari Web Inspector.

Anyone have any luck with this?

Top Reply

Response title

Attachments

jQuery Forum

Cube Page Transition from jQTouch

Replies(4)

Re: Cube Page Transition from jQTouch

Re: Cube Page Transition from jQTouch

Re: Re: Cube Page Transition from jQTouch

Re: Cube Page Transition from jQTouch

Statistics

Tags

Actions