JSFiddle - React, Tailwind, and code Playground

by bionicoz

HTML

<h1>TestoSfiguz</h1>
<h2 id="status">Clicche il big cubo, grazie</h2>
<div id="quadro"></div>

CSS

html,body{width:100%; height:100%; font-family: 'Fugaz One'}
h1,h2{font-size:60px; text-align:center; border:1px solid green; text-shadow: 1px 1px 0 #FAFAFA,2px 2px 0 rgba(136, 136, 136, 0.5);}
h2{font-size:20px;height:120px;}
#quadro{
    margin-top:60px;
    width:300px; 
    height:300px; 
    background-color:grey;
    -webkit-perspective: 600px; 
    -webkit-perspective-origin:50% 50%; 
    margin:0 auto;
    background-image:url("http://risovach.ru/upload/2012/01/comics_Omskaya-ptica_orig_1325494513.jpg"); 

}





.cube.rotated{-webkit-transform:  rotateY(450deg)}

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

/*************/
.cube{
    position: absolute;
    height: 100px;
    width: 100px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all ease 1350ms; 
    cursor:pointer;
}
.cube>div{
-webkit-backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(205, 205, 200,1);
font-size: 1em;
line-height: 1em;
color: white;
   
}

.cube > div:first-child  {
-webkit-transform: rotateX(90deg) translateZ(50px);

}

.cube > div:nth-child(2) {
-webkit-transform: translateZ(50px);
}

.cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(50px);
text-align: center;
}

.cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
}

.cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(50px);
}

.cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(-90deg) translateZ(50px) ;
    
}

.cube > div > p {
line-height:100px;
    text-align:center;
}

JavaScript

/*!
 * jQuery Transit - CSS3 transitions and transformations
 * Copyright(c) 2011 Rico Sta. Cruz <[email protected]>
 * MIT Licensed.
 *
 * http://ricostacruz.com/jquery.transit
 * http://github.com/rstacruz/jquery.transit
 */
(function(d){function j(a){var b=["Moz","Webkit","O","ms"],c=a.charAt(0).toUpperCase()+a.substr(1);if(a in k.style)return a;for(a=0;a<b.length;++a){var d=b[a]+c;if(d in k.style)return d}}function i(a){"string"===typeof a&&this.parse(a);return this}function q(a,b,c){!0===b?a.queue(c):b?a.queue(b,c):c()}function m(a){var b=[];d.each(a,function(a){a=d.camelCase(a);a=d.transit.propertyMap[a]||a;a=s(a);-1===d.inArray(a,b)&&b.push(a)});return b}function r(a,b,c,p){a=m(a);d.cssEase[c]&&(c=d.cssEase[c]);
var f=""+n(b)+" "+c;0<parseInt(p,10)&&(f+=" "+n(p));var h=[];d.each(a,function(a,b){h.push(b+" "+f)});return h.join(", ")}function e(a,b){b||(d.cssNumber[a]=!0);d.transit.propertyMap[a]=h.transform;d.cssHooks[a]={get:function(b){return(d(b).css("transform")||new i).get(a)},set:function(b,h){var f=d(b).css("transform")||new i;f.setFromString(a,h);d(b).css({transform:f})}}}function s(a){return a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()})}function g(a,b){return"string"===typeof a&&!a.match(/^[\-0-9\.]+$/)?
a:""+a+b}function n(a){d.fx.speeds[a]&&(a=d.fx.speeds[a]);return g(a,"ms")}d.transit={version:"0.1.2+",propertyMap:{marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"},enabled:!0,useTransitionEnd:!0};var k=document.createElement("div"),t=-1<navigator.userAgent.toLowerCase().indexOf("chrome"),h={transition:j("transition"),transitionDelay:j("transitionDelay"),transform:j("transform"),
transformOrigin:j("transformOrigin")};d.extend(d.support,h);var...