JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/testing/TweenMax.min.js"></script>
<div class="box"></div>
<div class="box photo"></div>

CSS

.box{
    position:relative;
    width:200px;
    height:200px;
    background-color:red;
    margin: 100px auto 0px auto;
    -webkit-backface-visibility: hidden;  
}


.photo{
    background: url(http://www.snorkl.tv/images/photo.png) no-repeat;
}

JavaScript

var box = $('.box');

var tl = new TimelineLite();

tl.to(box, 1, {css:{boxShadow:"2px 2px 10px black"}})
  .to(box, 1, {css:{borderRadius:"32px"}})
  .to(box, 1, {css:{borderTopLeftRadius:"0px", borderBottomRightRadius:"0px", borderTopRightRadius:"64px"}})
  .to(box, 1, {css:{boxShadow:"0px"}})
  .to(box, 4, {css:{rotationX:180, rotationY:180}})
  .to(box, 1, {css:{rotationX:0}})