JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<div id="test"></div>

CSS

#test { border: 1px solid red; width: 100px; height: 100px; }

JavaScript

var cssPrefixes = [ "", "Webkit", "Moz", "O", "ms" ],
    styles = document.createElement("dx").style;

var _normalize = function(text) {
    if(text === undefined || text === null)
        return "";
    return String(text);
};

var _ucfirst = function(text) {
    return _normalize(text).charAt(0).toUpperCase() + text.substr(1);
};

var _chop = function(text) {
    return _normalize(text)
    .replace(/([a-z\d])([A-Z])/g, "$1 $2")
    .split(/[\s_-]+/);
};

var camelize = function(text, upperFirst) {
    return $.map(_chop(text), function(p, i) {
        p = p.toLowerCase();
        if(upperFirst || i > 0)
            p = _ucfirst(p);
        return p;
    }).join("");
};

var styleProp = function(prop) {
    prop = camelize(prop, true);
    
    for(var i = 0; i < cssPrefixes.length; i++) {
        var specific = cssPrefixes[i] + prop;
        if(specific in styles)
            return specific;
    }
};

var getCssTransform = function(translate) {
     return "translate3d(" + (translate.x || 0) + "px, " + (translate.y || 0) + "px, 0)";
}

var transform3d = !!styleProp("perspective"),
    transformProp = styleProp("transform");

$("#test").css(transformProp, getCssTransform({ x: 100, y: 100 }));

console.log($("#test").css(transformProp))