3D Rotation on QML Object

Question

I have a rectangular object that I would like to appear as if it has been rotated in 3D as shown in the picture below:

The transformation that I'm applying on the object rotates it along the Y-axis as required, but I can't seem to figure out what other modifications I should make so that it looks like the object is being viewed from the top.

Here's the transformation I'm applying on the Rectangle object:

transform: Rotation{
            id: rotateImagePhoto
            angle: 45
            axis { x: 0; y: 1; z: 0 }
            origin.x: rect.width/2
            origin.y: rect.height/2
        }

The effect this has on the object is similar to what has been shown in the Rotation example in QML documentation linked here.

How should I change the transformation to get the desired result?

Answer 1

I've used the following guide to create a isometric transformation to create the transform list. You could probably also create a Matrix4x4 that combines all the transformation steps in one matrix.

Rectangle {
    anchors.centerIn: parent
    color: "red"
    width: 300
    height: 300
    transform: [
        Rotation {
            axis { x: 0; y: 0; z: 1 }
            angle: 45
            origin.x: 150
            origin.y: 150
        },
        Scale {
            xScale: 0.5773
            yScale: 1.0
        },
        Rotation {
            axis { x: 0; y: 0; z: 1 }
            angle: -30
        }
    ]

    Text {
        text: "HELLO"
        color: "black"
        anchors.centerIn: parent
        font.pixelSize: 80
    }
}