Flip of figure

[JcKairos]

I am currently creating a program to teach players about symmetry but I encountered some problem

This is what I want to get:

The program works fine when flipping horizontally.

However when it comes to diagonal:

Is it possible for the figure to flip diagonally while it stays on the line of symmetry and not not fly out of it?

Flip code of horizontal:

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 450}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
     this.game.time.events.add(Phaser.Timer.SECOND * 1, function () {
        this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
        this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 0}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
    }, this);
     this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () {
        this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500);
    this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 450}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
}, this);
     this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () {
        this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
        this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 0}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
}, this);

 

Flip code for diagonal:

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 318}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
     this.game.add.tween(graphicsend).to({angle:'+90'}, 500, Phaser.Easing.Linear.None, true);

    this.game.time.events.add(Phaser.Timer.SECOND * 1, function () {
        this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
        this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 133}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
     this.game.add.tween(graphicsend).to({angle:'-90'}, 500, Phaser.Easing.Linear.None, true);
    }, this);
     this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () {
        this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500);
     this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 318}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true);
     this.game.add.tween(graphicsend).to({angle:'+90'}, 500, Phaser.Easing.Linear.None, true);
}, this);
     this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () {
        this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500);
       this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { x: 133}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true);
    this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
     this.game.add.tween(graphicsend).to({angle:'-90'}, 500, Phaser.Easing.Linear.None, true);
}, this);

[veggis]

You could tween all the points not on the diagonal line to the opposite points.

https://jsfiddle.net/a68Qp/313/

But there's probably some translation matrix wizardry that'll do it better

[JcKairos]

Is it possible for this kind of shapes?

And may I know what does the 4 and 5 represent in this code: game.add.tween(rightG.currentPath.points).to({4: 0, 5:0}, 2500, Phaser.Easing.Linear.None, true);?