Overlapping SpriteNodes when rotating as a unit

I've encountered an issue when developing my application using Swift 3 and Spritekit. I have made four separate triangles that make up a square for the sake of detecting collision. When I go to rotate these triangles as one unit they overlap and do not hold the shape of a square(they overlap each other) during the rotation but then go back to normal once the rotation is complete.

This is the code I used for the rotation:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touch in touches{
        let location = touch.location(in: self)

        if location.x < 0 {
            blueTriLeft.run(SKAction.rotate(byAngle: CGFloat(M_PI_2), duration: 0.2))
            redTriLeft.run(SKAction.rotate(byAngle: CGFloat(M_PI_2), duration: 0.2))
            yellowTriLeft.run(SKAction.rotate(byAngle: CGFloat(M_PI_2), duration: 0.2))
            greenTriLeft.run(SKAction.rotate(byAngle: CGFloat(M_PI_2), duration: 0.2))

        } else if location.x > 0 {
            blueTriRight.run(SKAction.rotate(byAngle: CGFloat(-M_PI_2), duration: 0.2))
            redTriRight.run(SKAction.rotate(byAngle: CGFloat(-M_PI_2), duration: 0.2))
            yellowTriRight.run(SKAction.rotate(byAngle: CGFloat(-M_PI_2), duration: 0.2))
            greenTriRight.run(SKAction.rotate(byAngle: CGFloat(-M_PI_2), duration: 0.2))
        }
    }
}

Below is a picture of my square made up of four separate triangles

Please feel free to ask me for any other code you need to see, any input helps. Also I couldn't get the overlapping issue in action so sorry in advance but I will try my best to get it.