CSS3 3D Box With Shadows - css

Question

I'm making a notification system. I want this notification to show up like a box that turns, somewhat like some notifications in iOS that the top of the screen rotates like a cube.
Now, the front and back of the cube should be transparant/same color as background. When it turns, a shadow should fall over the sides that are not parallel to the front of the viewer, as if there is a lamp shining on the box. Can this be done?
To make more clear: Since the front & back of the box are the same as the background-color, when turning the box it wouldn't seem like a box turning but rather a slice of paper that rotates into place. So what I want is that faces of the cube get a shadow to it depending on their angle as opposed to the viewer.
For example, once the front-face (which you can't really see since it's the same color as the background-color) is rotated 1 degree, it should get a little darker/lighter. Another degree, a little more. So that the true color of the face is only shown when it's directly parallel to the user. This will create the illusion of there being a box, rather than a sliver of paper.
I'm using this tutorial on the cube: http://desandro.github.io/3dtransforms/docs/cube.html
Here is a fiddle: http://jsfiddle.net/BqJMW/3/
Another issue is that currently the text seems a bit stretched, if you know what I mean. Normally the transform: translateZ(-25px); (see code below) on the #cube should solve this, but it still seems out of proportion.
CSS
body {
background: #ebebeb;
}
.container {
width: 200px;
height: 50px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform: translateZ(-25px);
transform: tranlateZ(-25px);
}
#cube figure {
margin:0;
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube .front {
background: transparant;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
#cube .top {
background: green;
-webkit-transform: rotateX(-90deg) translateZ(25px);
transform: rotateX(-90deg);
}
#cube .back {
background: transparant;
-webkit-transform: rotateX(180deg) translateZ(25px);
transform: rotate(180deg);
}
#cube.show-front {
-webkit-transform:translateZ(-25px);
tranform: translateZ(-25px);
}
#cube.show-top {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
#cube.show-back {
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
HTML
<section class="container">
<div id="cube">
<figure class="front">Front</figure>
<figure class="top">Your notification</figure>
<figure class="back">Back</figure>
</div>
</section>

Answer 1

By setting the initial colour of the notification face to a darker version of the final color, we can use a CSS3 transition on the color attribute of that face to animate it to a lighter colour as the face is rotated.
I've added a new class with the lighter "green" that will be added/removed to/from the notification face and changed the initial color added a new transition to #cube .top.
I've also corrected some typos in the CSS (tranform → transform, transparant → transparent) and removed the duplicate -webkit-transform:translateZ(-25px); and non-prefixed version from the .show-front|top|back classes as they are being overridden in the same class.
Lastly, since the notification face is translated towards the viewer by 25px the text looks blurry (on Chrome). This seems to go away by removing the -webkit-perspective: 1000px; for me. I'll leave that up to you if you want to remove it.
See the demo or following code:
CSS
body {
background: #ebebeb;
}
.container {
width: 200px;
height: 50px;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform: translateZ(-25px);
transform: translateZ(-25px);
}
#cube figure {
margin:0;
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube .front {
background: transparent;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
}
#cube .top{
background-color:darkgreen;
-webkit-transform: rotateX(-90deg) translateZ(25px);
transform: rotateX(-90deg);
-webkit-transition:background-color .5s;
}
#cube .top.show {
background-color:green;
}
#cube .back {
background: transparent;
-webkit-transform: rotateX( 180deg ) translateZ(25px);
transform: rotate(180deg);
}
#cube.show-front{
}
#cube.show-top {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
#cube.show-back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
JavaScript
$('.showfront').click(function () {
$('.top').removeClass('show');
$('#cube').removeClass().addClass('show-front');
});
$('.showtop').click(function () {
$('.top').addClass('show');
$('#cube').removeClass().addClass('show-top');
});
$('.showback').click(function(){
$('.top').removeClass('show');
$('#cube').removeClass().addClass('show-back');
});