JSFiddle - React, Tailwind, and code Playground

by ritcheyer

HTML

<!--<script type="text/javascript" src="http://localhost:8080/scripts/jquery.transit.js"></script>-->

<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

<div class="app-container">
    <div class="app2">adsf</div>
</div>

CSS

.app-container { width: 60%; margin: auto; border: 1px solid #333;}
.app2 {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin: 10px auto;
    border: 1px solid #333;
    overflow: hidden;
}

JavaScript

// http://ricostacruz.com/jquery.transit/

$(document).ready(function() {
    $('.app-container').hover(function() {
        $('.app2').transition({
            perspective: '100px',
            rotateX: '180deg'
        });
    });

});