JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<div class="img_list">
   <label for="google" style="display: none"></label>
       <input style="display:none" id="google" type="checkbox" value="" name="google" /> 
</div>

CSS

@-webkit-keyframes tilter{
0%{
		-webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
	}
    25%{
-webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, 8deg);        
    }
    50%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    75%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    }
	100%{
		-webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
	}
	
}
@keyframes tilter{
	0%{
		-webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
	}
    25%{
-webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, 8deg);        
    }
    50%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    75%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    }
	100%{
		-webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
		transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
	}
	
}

.tilting{
    backface-visibility: visible !important;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    animation: tilter 3s ease-in 0s infinite;
    -webkit-animation: tilter 3s ease-in 0s infinite;
}
.img_list{
    width:200px;
    height:200px;
    background:#f00;
}
label {
display: inline-block;
height: 200px;
width: 200px;
}

JavaScript

//Recent try with better luck
$("body").on('click',function(e){
		if($(e.target).closest(".img_list")){
            var inp = $(e.target).closest(".img_list").find("input")[0];
			if(inp.checked){
				$(e.target).closest(".img_list").addClass("clicked tilting");
			}else{
				$(e.target).closest(".img_list").removeClass("clicked tilting");
			}
		}
	});

/* First try
  $('.img_list').click(function(){
     var inp = $(this).find("input")[0];
     if(inp.checked){
        $(this).addClass('clicked tilting');
     }else{
        $(this).removeClass('clicked tilting');
     }
    });
*/