QML : Flippable Clock issue

[Craig27]

I'm trying to get the flippable effect in the my designed digital clock so that i can have a flippable effect to it through context Menu. I tried to use the flippable property but go lots of errors.

Can any one please advice how to achieve the flippable effect in the on half of the digit, i mean same effect what we have in the flippable clock

Below is my sample code

@import Qt 4.7

Item {

width : 300
height : 200
id: clock

property color textColor : "#727272"
property int fontSize : 65
property variant hours : "00"
property variant minutes : "00"
property variant seconds : "00"
property string date: ""
property variant shift : 0
property bool showSeconds : true
property bool showDate : true

function timeChanged() {

    var d = new Date;

    // hours
    var tmp = checkTime(shift ? d.getUTCHours() + Math.floor(clock.shift) : d.getHours())
    if (tmp != hours)
        hours = tmp

    // minutes
    tmp = checkTime(shift ? d.getUTCMinutes() + ((clock.shift % 1) * 60) : d.getMinutes())
    if (tmp != minutes)
        minutes = tmp

    // seconds
    seconds = checkTime(d.getUTCSeconds())

    // get Date
    date = d.getDate();
}

function checkTime(i) {
    return (i<10) ? "0"+i : i;
}

Timer {
    interval: 1000; running: true; repeat: true; triggeredOnStart: true
    onTriggered: clock.timeChanged()
}

Column {
    id: columnLayout
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

    Row {
        id : rowLayout
        anchors.verticalCenter: parent.verticalCenter

       Rectangle{

            id: secondsframe
            width : 75
            height : 100
            radius : 4
            color:"#2c2c2c"
            border.width: 2
            border.color: "#000000"

            Text {
                id : secondsText
                text: clock.seconds
                color: clock.textColor
                font.pixelSize: clock.fontSize
                visible : clock.showSeconds

                Behavior on text {
                    SequentialAnimation {
                        ParallelAnimation {
                            NumberAnimation { target: secondsText; property: "opacity"; to: 0.1; duration: 200 }
                            NumberAnimation { target: secondsText; property: "y"; to: clock.height; duration: 300 }
                        }
                        PropertyAction {  }
                        NumberAnimation { target: secondsText; property: "y"; to: -clock.height; duration: 0 }
                        ParallelAnimation {
                            NumberAnimation { target: secondsText; property: "opacity"; to: 1; duration: 200 }
                            NumberAnimation { target: secondsText; property: "y"; to: 0; easing.type: Easing.OutBounce; duration: 400 }
                        }
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
}

}
@

I tried the animation in the sample code but was not able to have flippable effect when I used the flippable property at the same.
A code sample to achieve that effect will be highly appreciable.