JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<p>Click the egg to rotate</p>

<div id="egg"></div>

CSS

p{
  margin:50px 0 0 100px;  
}

/* CSS to create egg shape */
#egg{
    display:block; 
    width: 126px; 
    height: 180px; 
    background-color: red; 
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    margin:100px;
    cursor:pointer;
    transform: perspective( 400px ) rotateY(45deg);
}

/* CSS for rotate class which has CSS transitions to perform a rotation of 360 degrees over 1.5s */
.rotate{
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;

    -moz-transition-property: -moz-transform;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;

    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    
    /*-moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);*/
transform: perspective( 400px ) rotateY(45deg);
}

JavaScript

$('#egg').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
    $('#egg').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
$('#egg').bind(transitionEnd,function(){
    animationEnd();
});

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