JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<script src="http://s3.amazonaws.com/ender-js/jeesh.min.js"></script>
<script src="http://ded.github.com/morpheus/morpheus.js" type="text/javascript"></script>
<script src="http://ded.github.com/morpheus/easings.js" type="text/javascript"></script>
<script src="http://ded.github.com/morpheus/ender.js" type="text/javascript"></script>


<div id="box"></div>

CSS

@media (min-width: 10px) {
  #box {
    background: url(http://www.placehold.it/425x240&text=Best);
  background-size: contain;
}
}
#box {
  margin: 25px;
  width: 50%;
  height: 100px;
  border: 1px;
  border-color: white;
  filter: inherit, progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.placehold.it/425x240&text=Best', sizingMethod='scale');
	-ms-filter: "inherit, progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.placehold.it/425x240&text=Best', sizingMethod='scale')";
}

JavaScript

function getsupportedprop(proparray){
    var root=document.documentElement //reference root element of document
    for (var i=0; i<proparray.length; i++){ //loop through possible properties
        if (typeof root.style[proparray[i]]=="string"){ //if the property value is a string (versus undefined)
          console.log('supportedtransform is: ' + proparray[i])
            return proparray[i] //return that string
        }
    }
}

var csstransform = getsupportedprop(['transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform'])

var box = document.getElementById('box')

box.style[csstransform] = 'rotate(20deg)'
morpheus(box, {'opacity': '0.5', transform: 'rotate(0deg)', 'border-color': 'black', 'duration': '9999'})