JSFiddle - React, Tailwind, and code Playground

by Checha Man

HTML

<div id='trigger'>Hover Me</div>
<div id='item'></div>

CSS

#trigger
{
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 0 10px 0;
    background: teal;
    color: white;
    font-family: sans-serif;
}

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    display: none;
	-webkit-transform: perspective(350px) rotateX(-90deg);
	transform: perspective(350px) rotateX(-90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
    animation: flipperUp 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipperUp 0.7s;
    -webkit-animation-fill-mode: forwards;
}

#item.flipped
{
    animation: flipper 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipper 0.7s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes flipper
{
	0% { transform: perspective(350px) rotateX(-90deg); }
	33%	{ transform: perspective(350px) rotateX(0deg); }
	66% { transform: perspective(350px) rotateX(10deg); }
	100% { transform: perspective(350px) rotateX(0deg); }
}

@-webkit-keyframes flipper
{
	0% { -webkit-transform: perspective(350px) rotateX(-90deg); }
	33%	{ -webkit-transform: perspective(350px) rotateX(0deg); }
	66% { -webkit-transform: perspective(350px) rotateX(10deg); }
	100% { -webkit-transform: perspective(350px) rotateX(0deg); }
}

@keyframes flipperUp
{
	0% { transform: perspective(350px) rotateX(0deg); }
	33%	{ transform: perspective(350px) rotateX(10deg); }
	66% { transform: perspective(350px) rotateX(0deg); }
	100% { transform: perspective(350px) rotateX(-90deg); }
}

@-webkit-keyframes flipperUp
{
	0% { -webkit-transform: perspective(350px) rotateX(0deg); }
	33%	{ -webkit-transform: perspective(350px) rotateX(10deg); }
	66% { -webkit-transform: perspective(350px) rotateX(0deg); }
	100% { -webkit-transform: perspective(350px) rotateX(-90deg); }
}

JavaScript

$('#trigger').on({
    mouseenter: function(){
        $('#item').show();
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
});