JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<link rel="stylesheet" href="http://www.greensock.com/_css/tour/greensock-theme/jquery-ui-1.9.1.custom.css">
<script src="http://www.greensock.com//js/src/tour/jquery/jquery-ui-1.9.1.custom.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div id="demo">
    <div id="redBox" class="box"></div>
    <div id="blueBox" class="box"></div>
    <div id="greenBox" class="box"></div>        
</div>   

<p><a href="http://jsfiddle.net/geekambassador/LjTgx/" target="_blank">Edit This Demo</a></p>

CSS

body{
    font-family:Arial, Helvetiva, Verdana;
}

#demo{
    background-color:#000;
    width:500px;
    padding:10px;
    margin-bottom:20px;
   
}

h1{
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
    color:#fff;
}

.box{
    position:relative;
    width:50px;
    height:50px;
    background-color:#0066ff;
    margin:10px 20px 20px 235px;
    
}

#redBox{
    background-color:red;
}
#blueBox{
    background-color:blue;
}
#greenBox{
    background-color:green;
}

p{
    margin-top:10px;
}

a:link{
    padding:10px;
    background-color:#600;
    color:#fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration:none;
}

a:visited{
    padding:10px;
    color:#fff;
}

a:hover{
    padding:10px;
    color:#fff;
    background-color:#900;
    
}

JavaScript

var redBox = $("#redBox"),
    blueBox = $("#blueBox"),
    greenBox = $("#greenBox");

//give all elements the same transformPerspective
//try changing this value to 100 or 800
CSSPlugin.defaultTransformPerspective = 200;

//use center as origin (default)
TweenLite.to(redBox, 3, {css:{rotationX:180}});
//use right as origin
TweenLite.to(blueBox, 3, {css:{rotationY:360, transformOrigin:"right"}});
//use center and -200 z
TweenLite.to(greenBox, 3, {css:{rotationY:360, transformOrigin:"50% 50% -200"}});