How to Create a Shuffled Paper Effect in CSS3

This is a nice effect which transforms a standard boxy-looking element and makes it look like shuffled paper. I recall seeing a similar effect a few years ago where it was handled with images but we’re going to use pure CSS3:

View the demonstration and code…

It should come as no surprise that :before and :after pseudo elements are used to display the bottom pages. These are rotated using a transformation to give the shuffled look. The code works in Chrome, Safari, Firefox, IE10 and Opera (Presto and probably Webkit versions). Older browsers may show the lower pages, but they won’t rotate them so they are effectively invisible. However, the effect should degrade gracefully.

Let’s start with some HTML:

<div class="papers">
<p>some content</p>
</div>

Nothing special to see here. I’ve used a generic div, but you could use section, article or whatever is appropriate. The “papers” class is responsible for applying the effect.

First, we’ll apply a background, border and shadow to the main and both pseudo elements:

.papers, .papers:before, .papers:after
{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

Notice that two box-shadows are defined: the inner page shading and a subtle drop-shadow.

Next, we’ll define the styles for the main element. Primarily, it’s the width, padding and margins but the relative position is the most important. Incidentally, do not be tempted to apply a z-index; it’ll cause the pseudo elements to appear on top.

.papers
{
	position: relative;
	width: 50%;
	padding: 2em;
	margin: 50px auto;
}

We’ll now apply some content, dimensions and positioning to the :before and :after pseudo elements. In essence, they have the same size, shape and location as the main element:

.papers:before, .papers:after
{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

Now comes the interesting part — we’ll rotate them using a transform. We require the -webkit prefix for Chrome and Safari. The -o prefix is required for Opera which prefers ‘rotate’ to ‘rotateZ’. Firefox and IE10 support the non-prefixed transform.

	-webkit-transform: rotateZ(2.5deg);
	-o-transform: rotate(2.5deg);
	transform: rotateZ(2.5deg);
	z-index: -1;
}

Note that we’ve set the z-index to -1 to push the elements below the main container.

Finally, we apply a different rotation to the :after pseudo element.

.papers:after
{
	-webkit-transform: rotateZ(-2.5deg);
	-o-transform: rotate(-2.5deg);
	transform: rotateZ(-2.5deg);
}

Easy. View the demonstration and code…

Please use the code as you wish — it’s relatively simple to apply different colors and rotation degrees, but you might discover a range of interesting effects. Post your links below…