Shuffled Papers Effect Using CSS3

Shuffled paper effect can be created using after and before pseudo elements of CSS. In this post we will share code for creating beautiful shuffled paper effect using CSS. You can also read our previous article about creating stacked paper effect using CSS. The output of the given code will be exact similar to the below given screenshot.

HTML

<div class="shuffled-papers"></div>

CSS

.shuffled-papers, .shuffled-papers:before, .shuffled-papers:after
{
background-color: #fff;
border: 1px solid #c2c2c2;
box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.shuffled-papers
{
position: relative;
width: 250px;
height:250px;
padding: 20px;
margin: 40px auto;
}
.shuffled-papers:before, .shuffled-papers:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(3deg);
-o-transform: rotate(3deg);
transform: rotateZ(3deg);
z-index: -1;
}
.shuffled-papers:after
{
-webkit-transform: rotateZ(-3deg);
-o-transform: rotate(-3deg);
transform: rotateZ(-3deg);
}

Leave a Reply

Your email address will not be published. Required fields are marked *