1

PROBLEM STATEMENT

I was inspired by the cube flip transforms presented here

I figured it would be great to have such transitions when I redirect the user from one page to another.

Then on inspecting the HTML I found out that it was an effect carried out on stacked divs.

I managed to replicate this at http://jsfiddle.net/celestialcitizen/WpxX3/14/

Now my site is designed with Twitter Bootstrap. So I decided to stack the various pages of my site as divs within a single page. I have a failed attempt up at http://jsfiddle.net/celestialcitizen/Rt4eR/4/

  1. Can anyone help me correct it ?

  2. When I do these transforms can I still ensure that elements within a page / div are clickable ?

EDIT:

These JS Fiddles must be viewed on safari and Firefox 15.0.1

2 Answers 2

1

I know it's late, but I did a little bit of jQuery porting of your first replication:

http://jsfiddle.net/celestialcitizen/WpxX3/14/

And here's the second one:

http://jsfiddle.net/Rt4eR/11/

It looked like you were messing up everything with the navbar-fixed-top bootstrap class and with the faces dimensions and positioning.

Notice the e.preventDefault() jQuery call, which would invalidate any link behaviour in your faces (i.e. remove it if you need a menu, etc).

0
0

this example I did about 3D transform might help, you can inspect the css/js/html for details

http://www.css3rubikexperiment.net/

To answer your quetion:

  1. The perspective of your transitions box might be wrong. Theses parameter ara a good start.

    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 90px;
    -webkit-transition: -webkit-perspective, 1s;
    -webkit-transform: scale(0.6);
    
  2. Yes, yes you can. After all we talking about div containers

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.