paper-clip

dabblet.css

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px 350px;
  font-size: 13px;   
}

.pages {
    position : relative;
}

.pages .page{
    width: 100px;
    height: 150px;
    background: #fff;
    border: solid #f6f6f6 1px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.3);     
}
#page1 { 
    /*transform: rotate(0deg);*/
    z-index: 2;
}
#page2 { 
    transform: rotate(3deg); 
    z-index:1;
}
#page3 { 
    transform: rotate(6deg); 
    z-index: 0;
}
.pages #page2, 
.pages #page3 {
	transition: transform 0.5s ease;
}
.pages:hover > #page2 {
	transform: translate(-100px,0) rotate(-3deg);
}
.pages:hover > #page3 {
	transform: translate(100px,0) rotate(6deg);
}

/* paper-clip */


.pages .clip {
	transition: transform 0.5s ease;
}

.pages:hover > .clip {
	transform: translate(10px,-100px) rotate(-60deg);
}

.clip {
width: 128px;
height: 128px;
position: absolute;
z-index:3;
}
.left{
left:-50px;
top:-50px;
transform: rotate(-10deg);
}

.right{
left:40px;
top:-50px;
transform: rotate(10deg);
}

.black {
background: url(
http://png-4.findicons.com/files//icons/766/base_software/128/paperclip3_black.png);
}

dabblet.html

<div class="pages">
    <div class="clip black left">4</div>
    <div class="page" id="page1">1</div>
    <div class="page" id="page2">2</div>
    <div class="page" id="page3">3</div>
</div>

​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}