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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -