JSFiddle - React, Tailwind, and code Playground

by blesh

JavaScript

//TRANSFORM
function forEach(arr, fn) {
    for (var i in arr) {
        fn(arr[i], i, arr);
    }
}

function lower(str) {
    if (!str) return '';
    return str.toLowerCase();
}

var prefixes = 'webkit moz ms o'.split(' ');

function getProp(el, name) {
    var lowered = lower(name),
        i, prop;
    if (lowered in el.style) {
        return lowered;
    }
    for (i in prefixes) {
        prop = prefixes[i] + name;
        if (prop in el.style) {
            return prop;
        }
    }
}

var div = document.createElement('div'),
    transformProp = getProp(div, 'Transform');

function getTransform(el) {
    var propVal = el.style[transformProp],
        reg = /(\w+?)\((.*?)\)/g,
        trans = {},
        match;
    if(!propVal) return {};
    while (match = reg.exec(propVal)) {
        trans[match[1]] = match[2];
    }
    return trans;
}

function setTransform(el, trans) {
    var propVal = '';
    forEach(trans, function (val, key) {
        propVal += (propVal ? ' ' : '') + key + '(' + val + ')';
    });
    el.style[transformProp] = propVal;
}


var div = document.createElement('div');
document.body.appendChild(div);
var trans = {
    rotate: '30deg',
    scaleX: 1.2
};
setTransform(div, trans);
var trans2 = getTransform(div);
console.log(div.outerHTML, trans2);