css3 - Slightly different CSS card flip effect -


fiddle

basically, instead of basic rotatey(180deg) method, i'm trying combine translatex transform card looks it's being picked right side (left when flipping back) , being laid down on "table" in new orientation.

as can see in fiddle, has right general motion, reason 2 faces not in sync. i'm not sure i'm doing wrong - guess i'm not spacial-geometrically incined xd

any sorting animation out appreciated!

i think want:

updated fiddle

the trick background needs transform origin:

#tcb {     background:#030;     transform:translatex(-100%) rotatey(180deg);     -webkit-transform:translatex(-100%) rotatey(180deg);     z-index:0;     transform-origin:100% 50%;     -webkit-transform-origin:100% 50%; } 

the reason angle of rotation reversed, need flip around other border. (so, origin @ 100%). , have changed, that, need readjust offset (the translatex value)

i needed move transform-origin foreground div (where set both foreground , background) foreground div.


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -