<style>
    #flipContainer {
        position: relative;
        width: 250px;
        height: 150px;
        margin: 20px;
    }
    .card-front, .card-back {
        position: absolute;
        width: 250px;
        height: 150px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: white;
    }
    .card-front {
        background: linear-gradient(45deg, #2196F3, #21CBF3);
    }
    .card-back {
        background: linear-gradient(45deg, #FF9800, #FF5722);
    }
</style>

<div id="flipContainer">
    <div class="card-front" id="frontCard">Front Card</div>
    <div class="card-back" id="backCard">Back Card</div>
</div>
<button id="flipBtn">Flip Card</button>

<script>
    $("#flipBtn").click(function() {
        var frontElement = $("#frontCard");
        var backElement = $("#backCard"); // This is the 'back' parameter - element shown after flip
        
        kendo.fx($("#flipContainer")).flip("horizontal", frontElement, backElement).play();
    });
</script>