JSFiddle - React, Tailwind, and code Playground

by rsadwick

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">front</div>
        <div class="back">back</div>
    </div>
</div>



<li id="todaysspecial" class="flyout-container flip-container flipper" ontouchstart="this.classList.toggle('hover');">
		<a class="front" href="/todays-special"
			manual_cm_sp="Global-_-TodaysSpecial-_-NA"
			manual_cm_re="Global-_-TodaysSpecial-_-NA"
			title="See Today's Special">
			Today's Special</a>
		<div class="flyout"></div>
     <div class="back">back</div>
    <div class="flyout">sdfsdfsdf</div>
	</li>

<button id="ff">test</button>

CSS

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
    list-style-type: none;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, #todaysspecial.flip .flipper, .flipper:hover, .flip {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter:"FlipH";
}
.flip-container, .front, .back {
    width: 69px;
    height: 41px;
}
.flipper {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    background: lightgreen;
    z-index: 2;
}
.back {
    background: lightblue;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flyout
{
    display: none;
}
}

JavaScript

$('#ff').on('click', function(){
    $('#todaysspecial').toggleClass('flip')
})


$(".flipper").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 $('.flyout').show();
});