Some time ago, I’ve written a post about creating Post-it cards with CSS.
Now, instead of rotating the card, I wanted to have a 3D effect showing the card stuck on the board at the top and loose at the bottom. This can also be achieved with CSS3 transforms.
What you need for this is to define a container which will basically host the 3D effect and the card in it:
<html> <body> <div class='container'> <div class='card'>Buy some milk</div> </div> </body> </html>
Now you need to define the size of the card on the container and have the card fully occupy it:
.container {
width:250px;
height:150px;
position: relative;
margin: 10px;
}
.card {
width: 100%;
height: 100%;
padding: 15px;
position: absolute;
}
The paddings and margins are just there that it looks nicer. The container is set to relative positioning and the card to absolute positioning.
So that it looks like a post-it card, you’ll need to style it a little bit:
.card {
width: 100%;
height: 100%;
padding: 15px;
position: absolute;
background: none repeat scroll 0 0 #FFFFA5;
border: 1px solid black;
box-shadow: 2px 4px 6px #444444;
-moz-box-shadow: 2px 4px 6px #444444;
-webkit-box-shadow: 2px 4px 6px #444444;
font-family: "Lucida Handwriting",cursive;
font-size: 15px;
}
It will look like this:
Now to get the 3d effect, you need to:
- Define a perspective on the container. It basically defines how many pixels a 3D element is placed from the view.
- Define a transformation on the card slightly rotating in the middle on the horizontal axis.
The following should be added to the style of the container:
perspective: 100px; -webkit-perspective: 100px;
Note that unlike what you will find googling for it, Firefox does seem to support the CSS perspective property without -moz- prefix (but you might need it for older versions of the browser). Also note that Chrome (and I guess Safari too) does require a browser specific prefix.
And the following should be added to the style of the card:
transform: rotateX(4deg); -webkit-transform: rotateX(4deg);
Here again note that you require a -webkit- property for Chrome but can use the one without browser prefix for the newer versions of Firefox.
And you’re done. The card then looks like this:
Here the complete sample code in case you just want to quickly copy and paste it:
<html>
<head>
<style>
.container {
width:250px;
height:150px;
position: relative;
margin: 10px;
perspective: 100px;
-webkit-perspective: 100px;
}
.card {
width: 100%;
height: 100%;
padding: 15px;
position: absolute;
background: none repeat scroll 0 0 #FFFFA5;
border: 1px solid black;
box-shadow: 2px 4px 6px #444444;
-moz-box-shadow: 2px 4px 6px #444444;
-webkit-box-shadow: 2px 4px 6px #444444;
font-family: "Lucida Handwriting",cursive;
font-size: 15px;
transform: rotateX(4deg);
-webkit-transform: rotateX(4deg);
}
</style>
</head>
<body>
<div class='container'>
<div class='card'>Buy some milk</div>
</div>
</body>
</html>