CSS3 3D Box with Shadows
I am making a notification system. I want this notification to appear as a window that rotates like some iOS notifications that the top of the screen rotates like a cube.
The front and back of the cube should now be transparent / same color as the background. As it turns, the shadow should fall on the sides that are not parallel to the front of the viewer, as if a lamp were on the box. It can be done?
To make things more clear: . Since the front and back of the window are the same as the background color, when you rotate the window, it doesn't feel like turning the box, but rather a piece of paper that rotates in place. So I want the faces of the cube to get a shadow from it based on their angle, not from the viewer.
For example, once the front edge (which you cannot see since it is the same color as the background color) is rotated 1 degree, it should be slightly darker / lighter. Another degree, a little more. So the true complexion is only displayed when it is directly parallel to the user. This will create the illusion that there is a box and not a piece of paper.
I am using this tutorial on a cube: http://desandro.github.io/3dtransforms/docs/cube.html
Here is a fiddle: http://jsfiddle.net/BqJMW/3/
Another problem is that currently the text seems to be a bit stretched out if you know what I mean. Usually transform: translateZ(-25px);
(see code below) #cube
shouldn't solve this problem, but it still seems disproportionate.
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>
source to share
By setting the original face color of the notification to a darker version of the final color, we can use a CSS3 transition on color
that face's attribute to animate it to a lighter color when the face is rotated.
I added a new class with a lighter "green" that will be added / removed on / from the notification side and changed the initial color
new transition added to #cube .top
.
I also corrected some typos in CSS ( tranform
→ transform
, transparant
→ transparent
) and removed duplicate -webkit-transform:translateZ(-25px);
and non-prefixed version from classes .show-front|top|back
as they are overridden in the same class.
Finally, since the face of the notification is shifted towards the viewer 25px
, the text appears blurry (in Chrome). It seems to have disappeared, deleting it -webkit-perspective: 1000px;
for me. I'll leave that up to you in case you want to remove it.
See demo or the 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');
});
source to share