Controlling rotation axis with webkit 3d transform -
i'm creating card-flip effect using webkit transformations. have working in 1 section, have div rotates around center axis giving of card flipping over.
i want add same effect page transition. i'm using same css , html structure, in case i'm not getting effect rotates around center axis.
instead, looks transformation rotating along y axis anchored left of object rather center (so looks door opening, rather card flipping).
i've been reading through spec's can't figure out property controls rotation axis' position. need add or change flip working?
html structure:
<div id="frontbackwrapper"> <div id="front"></div> <div id="back"></div> </div>
and css (.flip being added via jquery start effect)
#frontbackwrapper { position: absolute; -webkit-perspective: 1000; -webkit-transition-duration: 1s; -webkit-transform-style: preserve-3d; -webkit-transition: 1s; } #frontbackwrapper.flip { -webkit-transform: rotatey(180deg); } #frontbackwrapper.flip #front, #frontbackwrapper.flip #back { -webkit-transform: rotatey(180deg); -webkit-transition: 1s; } #front, #back { position: absolute; -webkit-backface-visibility: hidden; } #back { -webkit-transform: rotatey(180deg); }
try on wrapper
-webkit-transform-origin: 50% 0 0;
though may or may not have have width explicitly set.
Comments
Post a Comment