SpriteNodes overlap when rotated as unit

Question

I had a problem while developing my application using Swift 3 and Spritekit. I made four separate triangles that make up a square for collision detection. When I go to rotate these triangles as one block, they overlap and do not hold the square shape (they overlap each other) during rotation, and then return to normal after the rotation is completed.

This is the code I used to rotate:

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 my square consisting of four separate triangles.

, - , , . , , , .

Answer 1

, , . , , . , . . - node, :

// This is the configuration to do in sceneDidLoad
let node = SKNode()
node.addChild(blueTriLeft) 
node.addChild(redTriLeft)
node.addChild(yellowTriLeft)
node.addChild(greenTriLeft)
scene.addChild(node)

// Inside touchesBegan(_:, with:)
node.run(SKAction.rotate(byAngle: CGFloat(-M_PI_2), duration: 0.2))