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); }
Comments
Post a Comment