JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<input id="btn1" type="button" value="Scale only" />
<input id="btn2" type="button" value="Translate only" />
<input id="btn3" type="button" value="Both" />
<input id="btn4" type="button" value="Reset" />
<div id="trgt"></div>

CSS

div{
    width: 100px;
    height: 100px;
    background: red;
    font-size: 30px;
    
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    
}

JavaScript

$('#btn1').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5)"
    });
});
$('#btn2').click(function(){
    $("#trgt").css({
        "-webkit-transform": "translate(100px, 100px)"
    });
});
$('#btn3').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5) translate(100px, 100px)"
    });
});
$('#btn4').click(function(){
    $("#trgt").css({
        "-webkit-transform": "none"
    });
});