Preserve 3D Sample

by rhernando

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.1/TweenMax.min.js"></script>
<p>
<button id="btn1">Tween Faces</button><button id="btn2">Rotate Parent</button>
</p>

<div class="container">
	<div id="cubeParent">
    	<div id="face1"></div>
        <div id="face2"></div>
        <div id="face3"></div>
    </div>
</div>

CSS

.container {
    perspective: 500px;
    border: 1px solid black;
	margin:50px;
	background:#ccc;
    width:150px;
}
#cubeParent{
	transform-style:preserve-3d;
    height:150px;
    width:150px;
    
}
#face1, #face2, #face3{
	height:150px;
	width:150px;
	position:absolute;
}
#face1{
	background:#00F;
}
#face2{
	background:#f0f;
}
#face3{
	background:#063;
}

JavaScript

var tl1 = new TimelineMax({paused:true}),
	face1 =$("div#face1"),
	face2 =$("div#face2"),
	face3 =$("div#face3"),
	cubeParent = $("div#cubeParent"),
	btn1 = $("button#btn1"),
	btn2 = $("button#btn2");

tl1
	.to(cubeParent, .5, {z:'-=75'})
	.to(face1, .5, {rotationY:90, x:'-=75'})
	.to(face2, .5, {rotationX:90, y:'-=75'}, '-=.5')
	.to(face3, .5, {rotationX:90, y:'+=75'}, '-=.5');

btn1.click(function()
{
	tl1.play(0);
});

btn2.click(function()
{
	TweenMax.to(cubeParent, .5, {rotationY:'+=45'});
});