<style>
    #container {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .face, .back {
        position: absolute;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
    }
    .face {
        background: #4CAF50;
        color: white;
    }
    .back {
        background: #FF5722;
        color: white;
    }
</style>

<div id="container">
    <div class="face" id="frontElement">This is the Face</div>
    <div class="back" id="backElement">This is the Back</div>
</div>

<script>
    // The face parameter specifies which element is initially visible
    var faceElement = $("#frontElement");
    var backElement = $("#backElement");
    
    kendo.fx($("#container")).flip("horizontal", faceElement, backElement).play();
</script>