Efek Tumpukan Kertas Dengan Css3

Published by Concept Phone Minggu, 26 Agustus 2018

CSS

/* --------------------------------------------------------- Sesuaikan lebar kertas dan penampilan. Pastikan pengurangan/penambahan lebar sesuai dengan perbandingannya --------------------------------------------------------- */  .paper1 {   width:730px;                  /*(730 + 0)*/   background:#fff;   border:1px solid #ccc; }  .paper1:before {   width:749px;                 /*(730 + 19)*/   background:#fafafa;   border:1px solid #ccc; }  .paper1:after {   width:756px;                 /*(730 + 26)*/   background:#fafafa;   border:1px solid #ccc; }   /* --------------------------------------------------------- Jangan mengedit bab ini jikalau belum yakin --------------------------------------------------------- */  .paper1 {   padding:15px;   height:100%;   position:relative;   -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);   -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);   box-shadow:0 0 2px hsla(0,0%,0%,.2); }  .paper1:after, .paper1:before {   content:'';   bottom:-3px;   height:100%;   left:1px;   position:absolute;   z-index:-1;   -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);   -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);   box-shadow:0 0 2px hsla(0,0%,0%,.2);   -webkit-transition:all .5s ease-out;   -moz-transition:all .5s ease-out;   -o-transition:all .5s ease-out; }  .paper1:before {   bottom:-5px;   left:5px; }  .paper1:hover:after {   -webkit-transform:rotate(-3deg) translate(-20px,0);   -moz-transform:rotate(-3deg) translate(-20px,0);   -ms-transform:rotate(-3deg) translate(-20px,0);   -o-transform:rotate(-3deg) translate(-20px,0);   transform:rotate(-3deg) translate(-20px,0);   -webkit-transition:all .5s ease-out;   -moz-transition:all .5s ease-out;   -o-transition:all .5s ease-out; }  .paper1:hover:before {   -webkit-transform:rotate(3deg) translate(20px,0);   -moz-transform:rotate(3deg) translate(20px,0);   -ms-transform:rotate(3deg) translate(20px,0);   -o-transform:rotate(3deg) translate(20px,0);   transform:rotate(3deg) translate(20px,0);   -webkit-transition:all .5s ease-out;   -moz-transition:all .5s ease-out;   -o-transition:all .5s ease-out; }

Elemen Objek

<div class='paper1'>      KONTEN DI SINI </div>

Lihat Demo

Tampak anggun pada Firefox, namun kurang lancar pada Opera dan Chrome.

Dimodifikasi dari: Rudy Azhar - Tumpukan Kertas dengan CSS3

Sumber https://www.dte.web.id/