JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<div></div>

CSS

div {
    height: 200px;
    margin: 100px auto 40px;
    width: 200px;
    cursor:pointer;
    background:red;
}

.rotate{
      -webkit-transition-timing-function: ease-in-out;
         -moz-transition-timing-function: ease-in-out;
          -ms-transition-timing-function: ease-in-out;
           -o-transition-timing-function: ease-in-out;
              transition-timing-function: ease-in-out;  

      -webkit-transition-property: -webkit-transform;
         -moz-transition-property: -moz-transform;
          -ms-transition-property: -ms-transform;
           -o-transition-property: -o-transform;
              transition-property: transform;  
    
      -webkit-transition-duration: 2.5s;
         -moz-transition-duration: 2.5s;
          -ms-transition-duration: 2.5s;
           -o-transition-duration: 2.5s;
              transition-duration: 2.5s;    
    
      -webkit-transform: perspective( 400px ) rotateY( 360deg );
         -moz-transform: perspective( 400px ) rotateX( 360deg );
          -ms-transform: perspective( 400px ) rotateY( 360deg );
           -o-transform: perspective( 400px ) rotateY( 360deg );
              transform: perspective( 400px ) rotateY( 360deg );
}

JavaScript

$('div').click(function(){
    // Add class rotate (which has the CSS3 web transitions)
    $(this).addClass('rotate');  
});

// Function to be called when animation ends
function animationEnd(){
    // Remove class rotate so that we can rotate the egg when we click again
    $('div').removeClass('rotate');
}

// Set various browser specific transition end extensions
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
}
else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";    
}
else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
}
else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}    

// Bind on transition end listener
$('div').bind(transitionEnd,function(){
    animationEnd();
});

function animationEnd(){
    // Remove class rotate so that we can rotate the egg when we click again
    $('div').removeClass('rotate');
}