How to make front and backface of rectangle different

ligazetom

Hello,

I am learning with qml by making apps obviously, so I thought I'd make "Pick a pair" game. I'd like to use Rectangles as cards and whenever user will click on one it will rotate around X axis (so like fake 3D) and on the other side will be image, or text or whatever to distinguish it from other cards. I know there is possibility of the rotation, but is there some way how to set the "back" side of the rectangle to be different than front? Or do I have to change it while it is perpedicular to the screen when I can see only edge?

Thanks

raven-worx

@ligazetom
use 2 rectangles and make only one visible at the time (depending on the rotation angle)

J.Hilk

A small example of what @raven-worx said:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 200
    height: 200

    property bool redTop: false
    onRedTopChanged: {
        aniRedTangle.start()
        aniBlueTangle.start()
    }

    Button{
        id: btnSwitch
        anchors.left: parent.left
        anchors.right: parent.right

        onClicked: redTop = !redTop
    }

    NumberAnimation{
        id:aniRedTangle
        target: redTangle
        property: "width"
        to: redTop ? 50 : 0
    }

    NumberAnimation{
        id:aniBlueTangle
        target: blueTangle
        property: "width"
        to: redTop ? 0 : 50
    }

    Rectangle{
        id: redTangle

        color: "red"
        y: parent.height-height
        height: 100
        width: 50
        anchors.horizontalCenter: parent.horizontalCenter

    }

    Rectangle{
        id: blueTangle

        color: "blue"
        y: parent.height-height
        height: 100
        width: 0
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

ligazetom

This post is deleted!

ligazetom

@J.Hilk Yes thank you, I got the idea but since I would like to use images I cannot really change width, I can just switch IsVisible bool I guess, but what is the problem now is how do I implement the 3D rotation to animation.

It seems I cannot make state using Rotation type. I did something like this.

CardForm {
id: card

states: State{
name: "turned"; when: mouseArea.pressed === true
PropertyChanges {
target: frontRect
transform: Rotation {
origin.x: frontRect.Center
origin.y: frontRect.Center
axis { x: 0; y: 1; z: 0}
angle: 180
}
}
PropertyChanges {
target: backRect
transform: Rotation {
origin.x: backRect.Center
origin.y: backRect.Center
axis { x: 0; y: 1; z: 0}
angle: 180
}

}

transitions: Transition{
from: ""; to: "turned"; reversible: false
SequentialAnimation{
NumberAnimation{
properties: "rotation"
duration: 400
easing.type: Easing.InOutQuad
}
}
}

ligazetom

Nevermind

Flipable does exactly what I want