css3 - Slightly different CSS card flip effect -
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:
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
Post a Comment