JSFiddle - React, Tailwind, and code Playground

by bionicoz

HTML

<div id="quadro"></div>

CSS

#quadro{width:400px; height:400px; background-color:grey;
    -webkit-perspective: 800px;
    background-image:url("http://risovach.ru/upload/2012/01/comics_Omskaya-ptica_orig_1325494513.jpg");}

.cell{ -webkit-transition: all ease 1350ms; position:relative; transform-style: preserve-3d;}

.cell div{ height:100%; width:100%;position:absolute; -webkit-backface-visibility: hidden;}
.cell .front{top:0;left:0}
.cell .back{-webkit-transform:rotateY(180deg); background-color:orange; }

.cell.rotated{-webkit-transform:  rotateY(540deg)}

.cell.spin{-webkit-transform:  rotateZ(360deg) }

JavaScript

(function( $ ){

  $.fn.grill = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'rows'         : 3,
      'columns' : 3,
        'speed' : 200
    }, options);
      


    return this.each(function() {   
        
        $this=$(this);
       var cellStyle ={
           'width':$(this).width()/settings.columns,         
           'height':$(this).height()/settings.rows,
           'float':'left'
           //'backgroundImage':$this.css('backgroundImage')
         };
        var frontStyle={'backgroundImage':$this.css('backgroundImage')};
        $this.css({'background':'none'});
        
       
        
        for(var i=0; i<settings.rows; i++){
            for(var j=0; j<settings.rows; j++){
                
                frontStyle.backgroundPosition=-j*cellStyle.width+"px "+ -i*cellStyle.height +"px";
                
                var newcell = $('<div class="cell cell-'+(i*settings.columns+j) +'"><div class="front"></div><div class="back"></div></div>');
                newcell.css(cellStyle);
                newcell.children('.front').css(frontStyle);
                newcell.children('.back').css({backgroundImage:"url('http://www.rememberacharity.org.uk/images/quiz/icon_incorrect.gif')"});

                
                $this.append(newcell);
            }
            

        }
        
        //First click
        var summedspeed=0;        
        var status=1;
        $this.bind('click',function(){
            if(status==1){
                    
                    $(this).children('.cell').each(function(){

                        var obj=$(this);
                        
                        setTimeout(function(){obj.toggleClass('rotated')},summedspeed);
                        console.log(summedspeed);
                        summedspeed+=75+Math.random()*50;
                        
                    });
            status=2;
           ...