html5 - 3D flip with scg path and raphaeljs -
i using raphaeljs draw hexagon shapes using rapheal's .path() method. works pretty well. want rotate shape around y-axis crate 3d flip effect , show "back" of shape when user hovers on shape. far found out, rotatey not yet possible svg, correct?
my question is: there way make effect? maybe using css transitions? (this not work in ie < 9) or fake effect using sort of 3x3 transformation matrix?
also have found this, not sure if me , how use raphaeljs :(
thanks help!
nick
you can flip object in y axis applying scale(1, -1) transform it. if want animate flip need animate transform gradually scale(1, 1) scale(1, -1)
here's simple example of basic concept in raw svg.
<svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(0, 100)"> <path transform="translate(0, -50)" fill="red" d="m 75,10 l 25,90 l 125,90 z"> <set attributename="fill" to="lime" begin="0.5s" fill="freeze" /> </path> <animatetransform attributename="transform" attributetype="xml" type="scale" from="1, 1" to="1, -1" dur="1s" additive="sum" fill="freeze" /> </g> </svg>
you use raphael manipulate shape @ halfway point instead of simple smil fill change i've used looks you're seeing of shape. , use raphael animation although raphael won't smil you'd have use raphael , javascript manipulate transform attribute gradually changes scale(1, 1) scale(1, -1).
Comments
Post a Comment