1) Would be nice if your shredder actually centered itself or scaled to the display when it's too small -- like inside a codepen box.

2) Would be nice if the "shred" effect wasn't broken.

3) Would be even nicer if being CSS driven it were EM and/or % scaled given the wreck your output ends up being.

4) Since you're JUST targeting classes, why are you wasting processing time and overhead on the more complex querySelector instead of the classic (and faster) getElementsByClassName

5) Much less the outmoded agonizingly slow and possibly insecure innerHTML

6) Realistically ALL your scripting -- ANY OF IT -- should need is that single class swap. Your for loop generating elements could be replaced by a linear-gradient to make the "slices". A single generated content element could make your slices by a simple repeat-X... or at least one would/could since your rotate appears to be utterly banjaxed here.

Your example doesn't work right here, and the use of the outmoded rubbish pixel metrics is equally broken and convoluted.