css3 - Misplaced origin on rotateY transition -


i keep left edge of div.box in same place during transformy(-180deg) animation. can't understand why moving. code:

transform-origin: 0% 0%; transform: rotatey(-180deg); 

and here live example http://dabblet.com/gist/5551520

you're transitioning transform-origin, use transition: all, , specified in hover state. initial value centred.

if put transform-origin: 0% 0%; on .box work expected.

.box {     /* removed additional styles */     transition: 600ms linear;     transform-origin: 0% 0%; }  body:hover .box {     transform: rotatey(-180deg); } 

http://dabblet.com/gist/5551730


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -