0

I have written a flipUp function by using svg.js for fliping up and down an image. I need a side flip function also but I can not be able to implement side flip function by using scale(1,-1). Can anyone help me out?

flip up done help me for slide flip function flipUp written in personalise.js as under:

function flipUp()
{
    var angle = parseInt(target.trans.rotation,10) + 180;
    //if(angle > 360) angle = angle -360
    console.log(angle)
    target.animate().rotate(angle)

    //target.animate().transform('matrix' ,'-1,0,0,-1,0,0')
}

And the function is called from design.html as under:

<a href="#" onclick="flipUp()"><img src='flip_up.PNG' alt="" height="20" width="20" style='margin-top:-41px;margin-left:267px'></a>
  • Please provide [`jsfiddle example`](http://jsfiddle.net) of what you currently have. – Dom Aug 27 '13 at 15:06
  • how to work with jsfiddle.. i dont know.. each time i put it over there, it doesnot work.. canb you guide me please?? –  Aug 07 '14 at 13:29

1 Answers1

0

You can accomplish this wouldn't the need for svg.js. You just need to use transform, in particular rotate. Also dont forget to add deg to the angle.

DEMO

HTML:

<a href="#" onclick="flipUp(this)"><img src='flip_up.PNG' alt="" height="20" width="20" style='margin-top:-41px;margin-left:267px'></a>

JAVASCRIPT:

// el is the anchor element (a)
// el.children[0] is the img
// however, this assumes the first child of the anchor element is the img

var angle = 15;

function flipUp(el){

    el.children[0].style.transform = 'rotate(' + angle + 'deg)';

    // add 15 degs on every click
    angle += 15;
}

Hope this helps and let me know if you have any questions.

Dom
  • 38,906
  • 12
  • 52
  • 81