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:


shuffled paper
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…

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Sandy

    Putting a rotation on the main element also causes the pseudo elements to appear on top, just like when you give it a z-index.

    This smells like the IE hasLayout bug but it’s not in IE. I wonder what the reason is.

    • http://www.optimalworks.net/ Craig Buckler

      Really? I suspect there’s something hidden deep down in the W3C specs. It’s probably easier to rotate the main image and keep the :after static — that would work without issues, but just feels a little wrong…

  • http://www.moreonfew.com MoreOnFew

    That was a really a creative CSS3 idea :) . Many of us might have known and used these CSS3 properties but the combination of the various properties to achieve the effect is called “Creativity” !

    • http://www.optimalworks.net/ Craig Buckler

      Thanks — glad you liked it. I can’t really claim credit for the concept but it does look more interesting than a boring old box.

  • http://www.rohitazadmalik.blogspot.in Rohit azad

    Relly nice i like it…

  • http://mintik.com Ali

    Very nice seem. Thanks for tutorial.