How to flip the image like flippable clock

[A Former User]

Hi Folks am trying to make a flippable clock in QML.
But am not able to get the flippable effect as desired, I have referred the documentation of flip method, took that as base for further development.
Tried various approaches but didn't succeed. Any idea how to get that effect

Below is the referred documentation

@import QtQuick 1.0

Flipable {
id: flipable
width: 240
height: 240

 property bool flipped: false

 front: Image { source: "front.png"; anchors.centerIn: parent }
 back: Image { source: "back.png"; anchors.centerIn: parent }

 transform: Rotation {
     id: rotation
     origin.x: flipable.width/2
     origin.y: flipable.height/2
     axis.x: 1; axis.y: 0; axis.z: 0     // set axis.y to 1 to rotate around y-axis
     angle: 0    // the default angle
 }

 states: State {
     name: "back"
     PropertyChanges { target: rotation; angle: 180 }
     when: flipable.flipped
 }

 transitions: Transition {
     NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
 }

 MouseArea {
     anchors.fill: parent
     onClicked: flipable.flipped = !flipable.flipped
 }

}@

[A Former User]

I don't see anything wrong, and it works in my project as this :) !

[A Former User]

what I desired to have flip that image on x -axis through half of its height as we get in flippable clock

[A Former User]

Then try axis.x: 0; axis.y: 1; axis.z: 0....or the third axe^^