Qt Quick Transform Playground: mess around with Rotation and Scale transforms

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    visible: true
    width: 800
    height: 600

    RowLayout {
        anchors.fill: parent
        anchors.margins: 20

        GridLayout {
            columns: 3

            Label {
                text: "origin.x"
            }
            Slider {
                id: xOriginSlider
                value: 64
                to: 128
                onValueChanged: xOriginTextField.text = value
            }
            TextField {
                id: xOriginTextField
                text: xOriginSlider.value
                selectByMouse: true
                onTextChanged: xOriginSlider.value = parseFloat(text)
            }

            Label {
                text: "origin.y"
            }
            Slider {
                id: yOriginSlider
                value: 64
                to: 128
                onValueChanged: yOriginTextField.text = value
            }
            TextField {
                id: yOriginTextField
                text: yOriginSlider.value
                selectByMouse: true
                onTextChanged: yOriginSlider.value = parseFloat(text)
            }

            Label {
                text: "axis.x"
            }
            Slider {
                id: xAxisSlider
                onValueChanged: xAxisTextField.text = value
            }
            TextField {
                id: xAxisTextField
                text: xAxisSlider.value
                selectByMouse: true
                onTextChanged: xAxisSlider.value = parseFloat(text)
            }

            Label {
                text: "axis.y"
            }
            Slider {
                id: yAxisSlider
                value: 1
                onValueChanged: yAxisTextField.text = value
            }
            TextField {
                id: yAxisTextField
                text: yAxisSlider.value
                selectByMouse: true
                onTextChanged: yAxisSlider.value = parseFloat(text)
            }

            Label {
                text: "axis.z"
            }
            Slider {
                id: zAxisSlider
                onValueChanged: zAxisTextField.text = value
            }
            TextField {
                id: zAxisTextField
                text: zAxisSlider.value
                selectByMouse: true
                onTextChanged: zAxisSlider.value = parseFloat(text)
            }

            Label {
                text: "angle"
            }
            Slider {
                id: angleSlider
                value: 0
                to: 360
                onValueChanged: angleTextField.text = value
            }
            TextField {
                id: angleTextField
                text: angleSlider.value
                selectByMouse: true
                onTextChanged: angleSlider.value = parseFloat(text)
            }

            Label {
                text: "xScale"
            }
            Slider {
                id: xScaleSlider
                from: -2
                value: 1
                to: 2
                onValueChanged: xScaleTextField.text = value
            }
            TextField {
                id: xScaleTextField
                text: xScaleSlider.value
                selectByMouse: true
                onTextChanged: xScaleSlider.value = parseFloat(text)
            }

            Label {
                text: "yScale"
            }
            Slider {
                id: yScaleSlider
                from: -2
                value: 1
                to: 2
                onValueChanged: yScaleTextField.text = value
            }
            TextField {
                id: yScaleTextField
                text: yScaleSlider.value
                selectByMouse: true
                onTextChanged: yScaleSlider.value = parseFloat(text)
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            Rectangle {
                width: 128
                height: 128
                color: "steelblue"
                transform: [
                    Rotation {
                        origin.x: xOriginSlider.value
                        origin.y: xOriginSlider.value
                        axis.x: xAxisSlider.value
                        axis.y: yAxisSlider.value
                        axis.z: zAxisSlider.value
                        angle: angleSlider.value
                    },
                    Scale {
                        origin.x: xOriginSlider.value
                        origin.y: yOriginSlider.value
                        xScale: xScaleSlider.value
                        yScale: yScaleSlider.value
                    }
                ]
                anchors.centerIn: parent
            }
        }
    }
}