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>

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.

	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.

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

Tags: CSS Transforms, CSS3, HTML5 Dev Center, HTML5 Tutorials & Articles
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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.

    • 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…

  • 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” !

    • 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.

  • Rohit azad

    Relly nice i like it…

  • Ali

    Very nice seem. Thanks for tutorial.

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!