JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/testing/TweenMax.min.js"></script>
Animated rotationY:180 with GSAP with perspective applied to wrapper
<div class="wrapper">
    <div class="box gsap"></div>
    <div class="box gsap"></div>
</div>
Animated Animated roationY:180 with GSAP no perspective
<div class="box gsap"></div>
<div class="box gsap"></div>
Static 3D set with GSAP rotationY:45, no perspective
<div class="box gsapStatic"></div>
Static 3D set with CSS3 rotationY:45, perspective(500px)
<div class="box css3"></div>

CSS

.box{
    position:relative;
    width:100px;
    height:100px;
    background-color:red;
    margin: 25px 100px;
    background: url(http://www.snorkl.tv/images/photo.png) no-repeat;
}

.wrapper{
  -webkit-transform-style: preserve-3d;
  -webkit-transform: perspective(500px) 
}
.css3{
     -webkit-transform: perspective(500px) rotateY(45deg);
}

JavaScript

var gsap = $('.gsap');
var gsapStatic = $('.gsapStatic');

TweenLite.to(gsap, 2, {css:{rotationY:180}})
    
TweenLite.set(gsapStatic, {css:{rotationY:45}})