CSS
body{
background: #99ccff;
}
/* this is for the back flap of the folder */
.folder{
-webkit-perspective: 500px;
perspective: 500px;
width: 340px;
height: 100px;
background: #ffd480;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top-right-radius: 5px;
cursor: pointer;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
/* this is for the folder's tab */
.folder::before{
width: 80px;
height: 20px;
content: '';
background: #ffd480;
position: absolute;
top: -20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* this is for the folder's front flap */
.folder::after{
width: 340px;
height: 210px;
position: absolute;
content: '';
background: #ffcb66;
top: 40px;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* the transform property rotates the front flap of the folder a bit t0 make it look 3D */
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
/* this is for the piece of paper inside the folder */
.folder-inside{
width: 320px;
height: 200px;
position: absolute;
background: #fff;
top: 20px;
left: 10px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
border: 1px solid #ddd;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
/* this is for the lines on the paper */
.folder-inside::before{
content: '';
/* we're going to use linear gradients to create the lines */
background: -webkit-repeating-linear-gradient(145deg, #ffffff, #ffffff 10px, #333333 7px, #333333 20px);
background: repeating-linear-gradient(0deg, #ffffff, #ffffff 10px, #333333 10px, #333333 20px);
position: absolute;
top: -37px;
left: 65px;
width: 200px;
height: 290px;
color: #343434;
font-size: 60px;
line-height: 30px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0.15;
}
/* finally let's get this folder to rotate when we hover on it */
.folder:hover{
-webkit-transform: translate(-50%, -52%);
transform: translate(-50%, -52%);
}
.folder:hover::after{
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.folder:hover .folder-inside{
-webkit-transform: rotate(-7deg) translateY(-15%);
transform: rotate(-7deg) translateY(-15%);
}
/* hover over the folder to see the effect in action */
