JSFiddle - React, Tailwind, and code Playground

by jeshuamaxey

HTML

<body>
    
    <div class="container">
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <hr/>
    <button id="trigger">Click to flip</button>

</body>

CSS

body {
    background: #ccc;
}

.container {
    width: 200px;
    height: 200px;
}

.front, .back {
    width: 100%;
    height: 100%;
}

.front {
    background: #fff;
}

.back {
    background: #000
}

JavaScript

jQuery(document).load(function() {
  $('.container').flip({
    trigger: 'manual',
    axis: 'x',
    speed: 2000
  });
    
    $('#trigger').on('click', function() {
      $('.word').flip();
    });
});

// library
!function(a){var b=function(a){a.data("fliped",!0);var b="rotate"+a.data("axis");a.find(".front").css({transform:b+(a.data("reverse")?"(-180deg)":"(180deg)")}),a.find(".back").css({transform:b+"(0deg)"})},c=function(a){a.data("fliped",!1);var b="rotate"+a.data("axis");a.find(".front").css({transform:b+"(0deg)"}),a.find(".back").css({transform:b+(a.data("reverse")?"(180deg)":"(-180deg)")})};a.fn.flip=function(d){return this.each(function(){var e=a(this);if(void 0!==d&&"boolean"==typeof d)d?b(e):c(e);else{var f=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500},d);if(e.data("reverse",f.reverse),e.data("axis",f.axis),"x"==f.axis.toLowerCase())var g=2*e.outerHeight(),h="rotatex";else var g=2*e.outerWidth(),h="rotatey";e.find(".back").css({transform:h+"("+(f.reverse?"180deg":"-180deg")+")"}),e.css({perspective:g,position:"relative"});var i=f.speed/1e3||.5;if(e.find(".front, .back").outerHeight(e.height()).outerWidth(e.width()).css({"transform-style":"preserve-3d",position:"absolute","-webkit-transition":"-webkit-transform "+i+"s ease-out","-moz-transition":"-moz-transform "+i+"s ease-out","-o-transition":"-o-transform "+i+"s ease-out","-ms-transition":"-ms-transform "+i+"s ease-out",transition:"transform "+i+"s ease-out","backface-visibility":"hidden"}),"click"==f.trigger.toLowerCase())e.find('button, a, input[type="submit"]').click(function(a){a.stopPropagation()}),e.click(function(){e.data("fliped")?c(e):b(e)});else if("hover"==f.trigger.toLowerCase()){var j=function(){e.unbind("mouseleave",k),b(e),setTimeout(function(){e.bind("mouseleave",k),e.is(":hover")||c(e)},f.speed+150)},k=function(){c(e)};e.mouseenter(j),e.mouseleave(k)}}}),this}}(jQuery);