QML: using Matrix4x4 transform

Question

How do you rotate, using Matrix4x4 transform, a QML item around another axis than z, with the center of the item as origin of the transformation?

To rotate around the y axis with (0,0) as origin, I tried naively:

Image {
    source: "..."
    width: 100
    height: 100

    transform: Matrix4x4 {
        property real a: Math.PI / 4
        matrix: Qt.matrix4x4(
            Math.cos(a), 0, -Math.sin(a), 0,
            0,           1, 0,            0,
            Math.sin(a), 0, Math.cos(a),  0,
            0,           0, 0,            1)
    }
}

As a result, I get a cut width item whereas I am looking for a perspective effect.

Can anyone explain how the transformation matrix of QML items works?

I think that your question is a duplicate of this question. Does the answer provide the information you are searching for? — BaCaRoZzo
Almost. I just don't understand how to get some perspective when rotating around x or y — Fabien

plasmatron plasmatron · Accepted Answer · 2018-01-18T22:27:33

Here's comment from Unity 8:

// Rotating 3 times at top/bottom because that increases the perspective.
// This is a hack, but as QML does not support real 3D coordinates
// getting a higher perspective can only be done by a hack. This is the most
// readable/understandable one I could come up with.

Link to source code: https://github.com/ubports/unity8/blob/xenial/qml/Launcher/LauncherDelegate.qml#L287

QML: using Matrix4x4 transform

1 Answers