Simple Interactive 3D Cube

index.html

<p>
  <button id="btn7">Tween Faces</button>
  <button id="btn8">Rotate Parent</button>
  <div>
    <button id="btn1">front face</button>
    <button id="btn2">right face</button>
    <button id="btn3">back face</button>
    <button id="btn4">left face</button>
    <button id="btn5">top face</button>
    <button id="btn6">bottom face</button>
  </div>
</p>

<div class="container">
  <div id="cubeParent">
    <div class="cubeFace" id="face1"></div>
    <div class="cubeFace" id="face2"></div>
    <div class="cubeFace" id="face3"></div>
    <div class="cubeFace" id="face4"></div>
    <div class="cubeFace" id="face5"></div>
    <div class="cubeFace" id="face6"></div>
  </div>
</div>

<div class="container" style="margin-left:300px; margin-top:-200px;">
  <div id="cubeParent">
    <div class="cubeFace1" id="face1" style="background:url('http://s.cdpn.io/33073/1-150x150.jpg')"></div>
    <div class="cubeFace1" id="face2" style="background:url('http://s.cdpn.io/33073/2-150x150.jpg')"></div>
    <div class="cubeFace1" id="face3" style="background:url('http://s.cdpn.io/33073/3-150x150.jpg')"></div>
    <div class="cubeFace1" id="face4" style="background:url('http://s.cdpn.io/33073/4-150x150.jpg')"></div>
    <div class="cubeFace1" id="face5" style="background:url('http://s.cdpn.io/33073/5-150x150.jpg')"></div>
    <div class="cubeFace1" id="face6" style="background:url('http://s.cdpn.io/33073/6-150x150.jpg')"></div>
  </div>
</div>

script.js

var tl3 = new TimelineMax({paused:true}),
	tl4 = new TimelineMax({paused:true}),
	face1 =$("div#face1"),
	face2 =$("div#face2"),
	face3 =$("div#face3"),
	face4 =$("div#face4"),
	face5 =$("div#face5"),
	face6 =$("div#face6"),
	cubeParent = $("div#cubeParent"),
	
	btn1 = $("button#btn1"),
	btn2 = $("button#btn2"),
	btn3 = $("button#btn3"),
	btn4 = $("button#btn4"),
	btn5 = $("button#btn5"),
	btn6 = $("button#btn6"),
	btn7 = $("button#btn7"),
	btn8 = $("button#btn8");

TweenMax.set($("div.container"), {perspective:500});

TweenLite.set(cubeParent, {transformStyle:"preserve-3d"});

tl3
	.to(cubeParent, .5, {z:'-=75'})
	.to($("div.cubeFace"), .5, {autoAlpha:0.5})
	.to(face1, .5, {rotationY:90, x:-75})
	.to(face2, .5, {rotationX:90, y:-75}, '1')
	.to(face3, .5, {rotationX:90, y:75}, '1')
	.to(face4, .5, {rotationY:90, x:75}, '1')
	.to(face5, .5, {z:75}, '1')
	.to(face6, .5, {z:-75}, '1');

tl4
	.to(cubeParent, 5, {rotationY:720})
	.to(cubeParent, 2, {rotationX:360}, "-=2.5")
	.to(cubeParent, 1, {rotationY:-360, rotationX:0});

btn7.click(function()
{
	tl3.play(0);
	console.log(cubeParent[0]._gsTransform);
});

btn8.click(function()
{
	tl4.play(0);
});

btn1.click(function()//front face
{
	if(cubeParent[0]._gsTransform.rotationX != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationX:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationY:'0_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationY:'0_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
});

btn2.click(function()//right face
{
	if(cubeParent[0]._gsTransform.rotationX != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationX:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationY:'90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationY:'90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
});

btn3.click(function()//back face
{
	if(cubeParent[0]._gsTransform.rotationX != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationX:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationY:'180_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationY:'180_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
});

btn4.click(function()//left face
{
	if(cubeParent[0]._gsTransform.rotationX != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationX:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationY:'270_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationY:'270_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
});

btn5.click(function()//top face
{
	if(cubeParent[0]._gsTransform.rotationY != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationY:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationX:'-90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationX:'-90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'0_short'});
	}
});

btn6.click(function()//bottom face
{
	if(cubeParent[0]._gsTransform.rotationY != 0)
	{
		TweenMax.to(cubeParent, 1, {rotationY:'0_short'});
		TweenMax.to(cubeParent, 1, {rotationX:'90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'180_short'});
	}
	else
	{
		TweenMax.to(cubeParent, 1, {rotationX:'90_short'});
		TweenMax.to(cubeParent, 1, {rotation:'180_short'});
	}
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

simple-interactive-3d-cube.markdown

Simple Interactive 3D Cube

Greensock forums:

http://forums.greensock.com/topic/8228-transition-of-3d-cube/

A Pen by jvk on CodePen.

License.

style.css

html
{
  height:100%;
}

body
{
	margin:0;
  padding:0;
  background : -webkit-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -moz-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -o-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -ms-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background : -linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.container {
    border: 1px solid black;
	margin:50px;
	background:#ccc;
	width:150px;
}
#cubeParent{
	height:150px;
	width:150px;
	position:relative;
}
.cubeFace, .cubeFace1{
	height:150px;
	width:150px;
	position:absolute;
}
#face1{
	background:#00F;
}
#face2{
	background:#f0f;
}
#face3{
	background:#063;
}
#face4{
	background:#c00;
}
#face5{
	background:#f60;
}
#face6{
	background:#ff0;
}
.carItem{
	position:absolute;
	width:85px;
	height:113px;
}
#rotPlane{
	width:200px;
	height:200px;
	background:#00f;
	position:relative;
	color:#FFF;
}
button
{
  padding:5px 10px;
  margin:10px;
  border-radius:5px;
  background : -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
	background : -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%); 
	background : -linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);
  border:1px solid #646464;
}

button:hover
{
  background : -webkit-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -moz-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -o-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
	background : -ms-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%); 
	background : -linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
}

button:active
{
  position:relative;
	top:1px;
}