JSFiddle - React, Tailwind, and code Playground

HTML

<div class="style1">
    TYPOGRAPHY
</div>

<div class="style2">
    TYPOGRAPHY
</div>

<div class="style3">
    TYPOGRAPHY
</div>

<div class="style4">
    TYPOGRAPHY
</div>

CSS

body {
    font-size:100px;
    font-weight: normal;
    font-family: georgia, serif;
}

.style1 {
    transform:scale(0.2);    
    -webkit-transform:scale(0.2);   
}

.style2 {
    transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-transform:matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.style3 {
}

.style4 {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

JavaScript

setTimeout(function() {
    $('.style3').css('transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, -400, 0, 0, 1)');    
    $('.style3').css('-webkit-transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, -400, 0, 0, 1)');
    
    $('.style4').css('transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
    $('.style4').css('-webkit-transform', 'matrix3d(0.2, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
}, 1000);