JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="skewed"></div>


<script type="text/javascript">
    $(function() {
        $('.skewed').animate({
            transform: 'skew(45deg,0deg)'
        }, 1);
    });
</script>

CSS

body {
    background: #252525;
}

.skewed {
    height: 100px;
    width: 400px;
    margin: 100px auto;
    
    background: #FFF;
}

JavaScript

(function(a,b,c,d){function t(a){a=/\(([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(a);return[a[1],a[2],a[3],a[4],a[5],a[6]]}function s(a){return~a.indexOf("deg")?parseInt(a,10)*(d.PI*2/360):~a.indexOf("grad")?parseInt(a,10)*(d.PI/200):parseFloat(a)}function r(a){var b,c,e,f=a[0],g=a[1],h=a[2],i=a[3];if(f*i-g*h){b=d.sqrt(f*f+g*g);f/=b;g/=b;e=f*h+g*i;h-=f*e;i-=g*e;c=d.sqrt(h*h+i*i);h/=c;i/=c;e/=c;if(f*i<g*h){f=-f;g=-g;e=-e;b=-b}}else{throw new Error("matrix is singular")}return{t:[+a[4],+a[5]],r:d.atan2(g,f),s:[b,c],k:[d.atan(e),0]}}function q(b){b=b.split(")");var c=a.trim,e=-1,f=b.length-1,g,h,i,j=m?new Float32Array(6):[],k=m?new Float32Array(6):[],l=m?new Float32Array(6):[1,0,0,1,0,0];j[0]=j[3]=l[0]=l[3]=1;j[1]=j[2]=j[4]=j[5]=0;while(++e<f){g=b[e].split("(");h=c(g[0]);i=g[1];k[0]=k[3]=1;k[1]=k[2]=k[4]=k[5]=0;switch(h){case"translateX":k[4]=parseInt(i,10);break;case"translateY":k[5]=parseInt(i,10);break;case"translate":i=i.split(",");k[4]=parseInt(i[0],10);k[5]=parseInt(i[1]||0,10);break;case"rotate":i=s(i);k[0]=d.cos(i);k[1]=d.sin(i);k[2]=-d.sin(i);k[3]=d.cos(i);break;case"scaleX":k[0]=+i;break;case"scaleY":k[3]=i;break;case"scale":i=i.split(",");k[0]=i[0];k[3]=i.length>1?i[1]:i[0];break;case"skewX":k[2]=d.tan(s(i));break;case"skewY":k[1]=d.tan(s(i));break;case"skew":i=i.split(",");k[2]=d.tan(s(i[0]));k[1]=d.tan(s(i[1]||0));break;case"matrix":i=i.split(",");k[0]=i[0];k[1]=i[1];k[2]=i[2];k[3]=i[3];k[4]=parseInt(i[4],10);k[5]=parseInt(i[5],10);break}l[0]=j[0]*k[0]+j[1]*k[2];l[1]=j[0]*k[1]+j[1]*k[3];l[2]=j[2]*k[0]+j[3]*k[2];l[3]=j[2]*k[1]+j[3]*k[3];l[4]=j[0]*k[4]+j[1]*k[5]+j[4];l[5]=j[2]*k[4]+j[3]*k[5]+j[5];j=l}return l}"use strict";var e=c.createElement("div"),f=e.style,g="transform",h="Transform",i=["O"+h,"ms"+h,"Webkit"+h,"Moz"+h],j=i.length,k,l,m="Float32Array"in b,n,o,p=/Matrix([^)]*)/;while(j--){if(i[j]in...