How to add flip transformation to an image?


#1

Hello,

i have a module for cropping and rotating images. Now i also wanted to add functionality to flip an image.
This is what i did to apply the scaling and rotating:

setImageTransform: function () {
    var self = this;
    var transform = "translate3d(" + self.posX + "px," + self.posY + "px, 0) " + "scale3d(" + self.scale + "," + self.scale + ", 1)" + "rotate(" + self.rotate + "deg)";
        
    self.imgSelect.style[ionic.CSS.TRANSFORM] = transform;
    self.imgFull.style[ionic.CSS.TRANSFORM] = transform;
},

This is working fine. How could i add a horizontal and vertical flip?


#2

Oh it was much easier than i thought:

setImageTransform: function () {
    var self = this;
    var transform = "translate3d(" + self.posX + "px," + self.posY + "px, 0) " + "scale3d(" + self.scale + "," + self.scale + ", 1)" + "rotate(" + self.rotate + "deg)";
        
    if(self.flipV) {
        transform = transform + " rotateY(180deg)";
    }
        
    if(self.flipH) {
        transform = transform + " rotateX(180deg)";
    }
        
    self.imgSelect.style[ionic.CSS.TRANSFORM] = transform;
    self.imgFull.style[ionic.CSS.TRANSFORM] = transform;
},