Smooth SVG animation

I am trying to refresh the animation with the given parameter rotateX and rotateY:

$(document).ready(function() {
        var svg = document.getElementById("DC");
        var x = 10;
        var y = 0;
        for (j = 0; j<8 ; j++) {
            svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;');
            x = x  + 10;
        }
    });

But it didn't work. How to refresh the animation smoothly ?

Here is the HTML code:

<body><svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"><style></body>