jquery - Complex CSS Transform parent perspective -


i'm trying interactive version of this:

enter image description here

it's not easy because want make responsive, , should zoom item on click.

i had 3 ideas doing this: 1) every item placed in container transformed separately, , on click "reverse" transform, center it, zoom 80% of window's size. good, wasn't responsive, couldn't position these items because of percentage widths.

example: dl.dropboxusercontent.com/u/19864640/port/layout.html

2) container contains these items transformed. way can put items in 1 div, set percentage width of them, set padding in px. may responsive.

i decided change perspective "in front" make bit easier.

unfortunately time have problem. can't configure zooming now. because of transformed container can't use standard centering method.

i tried make "reverse transform" too, still cant center screen instead of transformed container.

example: dl.dropboxusercontent.com/u/19864640/portfolio/index.html

here's jsfiddle: jsfiddle.net/c76qek4z/1/

first 2 blocks in js plugins: first keep ratio of item, , second 1 easier transitions: ricostacruz.com/jquery.transit/

3) it's based on second idea, wanted append clicked item body, , center , zoom, again... time won't have transform animation.

i've been trying 20 hours, still can't this... have ideas? if not clear please ask - that's important me.


Comments