javascript - JavaScript を使用して CSS パラメーターを変更する

Question

私は次のCSSを持っています:

.makebig {
    -webkit-animation-name: cssAnimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
}
.makesmall {
    -webkit-animation-name: cssAnimation1;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation1 {
    from {
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(150px);
    }
    to {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
}

そして、このJavascript：

<script>
    function ani(fns1) {
    if (document.getElementById('fns1').getAttribute('clicked') == 'false') 
    {
        document.getElementById('fns1').className = 'makebig';
        document.getElementById('fns1').setAttribute('clicked', true);
    } else { 
        document.getElementById('fns1').className = 'makesmall';
        document.getElementById('fns1').setAttribute('clicked', false);
    }
}
</script>

このコードは、オブジェクトを 2 倍にスケーリングします。オブジェクトに基づいて異なる「スケール」パラメータを送信するにはどうすればよいですか?

クリックすると画像が拡大され、2 回目のクリックで元の縮尺に戻ります。画像のサイズとテキスト内の位置が異なるため、画面の中央に合わせて拡大縮小する必要があります。