I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side.
For reference, please see the illustration of my goal here:
https://i.stack.imgur.com/kwO8Z.png
I have included my current progress below, using a 45-degree angle to display the transformation as opposed to 90 degrees which hides the shape. http://jsfiddle.net/s6jwC/1/
<div id="stage">
<div id="cube">
<div id="cube_content">
</div>
</div>
</div>
#stage {
-webkit-perspective: 400px;
position: relative;
}
#cube {
width: 128px; height: 128px;
-webkit-transform: rotateY(45deg);
position: absolute;
left: 200px; top: 30px;
}
#cube_content {
width: 128px; height: 128px;
-webkit-transform: rotateX(45deg);
position: absolute;
left: 0; top: 0;
background: rgba(255, 0, 0, 0.7);
-webkit-transform-origin: 0% 100%;
}
Your assistance is appreciated!