CSS animated folder

HTML
<div class="container"> <div class="folder"> <div class="folder-inside"></div> </div> </div>
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 */
JAVASCRIPT
Expand for more options Login