JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div id="element2"></div>

CSS

body
{
        font-family: arial, helvetica, freesans, sans-serif;
        font-size: 100%;
        color: #333;
        background-color: #ddd;
}
 
h1
{
        font-size: 1.5em;
        font-weight: normal;
        margin: 0;
}
 
 
 
#element2
{
        width: 250px;
        height:250px;
        font-size: 2em;
        text-align: center;
        line-height: 5em;
        margin: 3em auto;
        border: 2px solid #666;
        border-radius: 7px;
}
 
 
#element2
{
        position: relative;
        overflow: hidden;
}
 
#element2:before
{
        content: "";
        position: absolute;
        /* Changed these */
        display:block;         
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        background: url(http://lorempixel.com/25/25) 0 0 repeat;
}
/*
#element2:before
{
       
        transform: rotate(30deg);
}*/

JavaScript

//document.getElementById('element2').getElementsByTagName('transform').style.webkitTransform = "rotate(-20deg)";
 
function rotate(r){
    var rotation, sheet, cssText;
 
    // Randomly choose a rotation and create the cssText rule (webkit)
    rotation = r || Math.floor(Math.random() * (350 - 10 + 1)) + 10;
    cssText = '#element2::before {-webkit-transform:rotate('+rotation+'deg); }';
 
    // Since we're rotating a pseudo-element, we need to create a stylesheet
    // since :before's cannot be directly manipulated
    sheet = document.createElement('style');
    sheet.type = 'text/css';
    sheet.media = 'screen';
    if(sheet.styleSheet)
        sheet.styleSheet.cssText = cssText;
    else
        sheet.appendChild(document.createTextNode(cssText));
    document.head.appendChild(sheet);
};
rotate(50);

document.getElementById('element2').addEventListener('click', function(){
    rotate();
});