Important: Please read the Qt Code of Conduct -

How to flip the image like flippable clock

  • 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


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

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

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

Log in to reply