JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="aninoob-player-interaction">
    <div class="snowball">
    
    
    
    </div>
</div>

CSS

.aninoob-player-interaction {
	position:fixed;
	z-index:40000;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
    -webkit-perspective:1000;
 	-webkit-perspective-origin: 50% 30%;
	-moz-perspective:1000px;
 	-moz-perspective-origin: 50% 30%;
	-o-perspective:1000;
 	-o-perspective-origin: 50% 30%;
	perspective: 1000px;
 	perspective-origin: 50% 30%;
}

.aninoob-player-interaction .snowball{
    background-color:#000000;
    width:100px;
    height:100px;
	position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:200px;
	-webkit-transform: translate3D(0px,0px,-5000px) rotateX(0deg) rotateY(0deg) rotateZ(44deg);
	-moz-transform: translate3D(0px,0px,-5000px) rotateX(0deg) rotateY(0deg) rotateZ(44deg);
	-0-transform: translate3D(0px,0px,-5000px) rotateX(0deg) rotateY(0deg) rotateZ(44deg);
	transform: translate3D(0px,0px,-5000px) rotateX(0deg) rotateY(0deg) rotateZ(44deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.aninoob-player-interaction .snowball.throw{
	position:relative;
	-webkit-transform: translate3D(0px,0px,900px) rotateX(0deg) rotateY(0deg) rotateZ(180deg);
	-moz-transform: translate3D(0px,0px,900px) rotateX(0deg) rotateY(0deg) rotateZ(180deg);
	-0-transform: translate3D(0px,0px,900px) rotateX(0deg) rotateY(0deg) rotateZ(180deg);
	transform: translate3D(0px,0px,900px) rotateX(0deg) rotateY(0deg) rotateZ(180deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style:...

JavaScript

$(document).ready(function(){
    
    $('.aninoob-player-interaction .snowball').click(function(){
        
        $(this).addClass('throw');
        
        var el = $(this);
        
        setTimeout(function(){
            
            el.addClass('melt');
                        
        },500);
        
    });
    
});