<div id="wrap1">
        <div id="roundTest1">
            <div id="round1"></div>
        </div>

        <div class="button-box">
            <a href="javascript:" class="button btn0">reset</a>
            <a href="javascript:" class="button btn1">scale-up</a>
            <a href="javascript:" class="button btn2">scale-down</a>
            <a href="javascript:" class="button btn3">rotate-x</a>
            <a href="javascript:" class="button btn4">rotate-y</a>
            <a href="javascript:" class="button btn5">rotate-z</a>
            <a href="javascript:" class="button btn6">rotate-scale</a>
            <a href="javascript:" class="button btn7">translate-x</a>
            <a href="javascript:" class="button btn8">translate-y</a>
            <a href="javascript:" class="button btn9">translate-z</a>
        </div>
        
    </div>

*{margin:0;padding:0;}
html, body{width: 100%; height: 100%; position: relative;;}
#wrap1{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center;}
#roundTest1{width: 100px; height: 100px; border-radius: 20px; background-color: rgba(0,0,0,0.2); }
#round1{width: 100px; height: 100px; border-radius: 20px; background-color: rgba(0,0,0,0.2); }
.button-box{ width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 100px;}
.button{display: block; padding: 15px 25px; font-size: 18px; text-decoration: none; color: #222; background: rgba(0,0,0,0.1); border-radius: 10px; margin: 10px}
/*  */
.scale-up{animation: scaleup 1s linear 1 ;}
@keyframes scaleup{
    0%{transform: scale(1,1);}
    100%{transform: scale(2,2);}
}
.scale-down{animation: scaledown 1s linear 1 ;}
@keyframes scaledown{
    0%{transform: scale(1,1);}
    100%{transform: scale(0, 0);}
}
.rotate-x{animation: rotatex 1s linear 1 ;}
@keyframes rotatex{
    0%{transform: perspective(300px) rotateX(0);}
    100%{transform: perspective(300px) rotateX(180deg);}
}
.rotate-y{animation: rotatey 1s linear 1 ;}
@keyframes rotatey{
    0%{transform: perspective(300px) rotateY(0);}
    100%{transform: perspective(300px) rotateY(180deg);}
}
.rotate-z{animation: rotatez 1s linear 1 ;}
@keyframes rotatez{
    0%{transform:perspective(300px) rotateZ(0);}
    100%{transform:perspective(300px) rotateZ(180deg);}
}
.rotate-scale{animation: rotatescale 1s linear 1 ;}
@keyframes rotatescale{
    0%{transform:perspective(300px) rotateZ(0) scale(1,1);}
    100%{transform:perspective(300px) rotateZ(180deg) scale(2,2);}
}
.translate-x{animation: translatex 1s linear 1 ;}
@keyframes translatex{
    0%{transform: translateX(0);}
    100%{transform: translateX(100px);}
}
.translate-y{animation: translatey 1s linear 1 ;}
@keyframes translatey{
    0%{transform: translateY(0);}
    100%{transform: translateY(100px);}
}
.translate-z{animation: translatez 1s linear 1 ;}
@keyframes translatez{
    0%{transform: perspective(300px) translateZ(0);}
    100%{transform: perspective(300px)  translateZ(100px);}
}

$(window).ready(function(){
 
    $(".btn1").on('click',async function(){
        $("#round1").addClass('scale-up');
    });
    $(".btn2").on('click',function(){
        $("#round1").addClass('scale-down');
    });
    $(".btn3").on('click',function(){
        $("#round1").addClass('rotate-x');
    });
    $(".btn4").on('click',function(){
        $("#round1").addClass('rotate-y');
    });
    $(".btn5").on('click',function(){
        $("#round1").addClass('rotate-z');
    });
    $(".btn6").on('click',function(){
        $("#round1").addClass('rotate-scale');
    });
    $(".btn7").on('click',function(){
        $("#round1").addClass('translate-x');
    });
    $(".btn8").on('click',function(){
        $("#round1").addClass('translate-y');
    });
    $(".btn9").on('click',function(){
        $("#round1").addClass('translate-z');
    });

    $('#round1').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
            $(this).removeClass();
    });
});