3D Folding Panels

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<section>
    <h3>3D Folding Panels Tutorials</h3>
    <div class="panel">I &#9992; NY</div>
    <p>Danish apple pie tootsie roll donut fruitcake gingerbread cupcake pudding jujubes. Bear claw macaroon dragée donut tart topping. Ice cream cookie sweet roll cotton candy chocolate bar toffee. Candy canes lemon drops halvah chupa chups cake dessert sweet roll. Chocolate cake tiramisu sweet roll. Biscuit cake powder sweet. Gummi bears bear claw donut dragée. Sesame snaps ice cream cookie pastry lollipop topping. Chocolate fruitcake cake. Halvah oat cake oat cake. Oat cake soufflé lemon drops cheesecake dessert.</p>
</section>

<section>
    <h3>3D Folding Panels Tutorials</h3>
    <div class="panel">I &hearts; NY</div>
    <p>Danish apple pie tootsie roll donut fruitcake gingerbread cupcake pudding jujubes. Bear claw macaroon dragée donut tart topping. Ice cream cookie sweet roll cotton candy chocolate bar toffee. Candy canes lemon drops halvah chupa chups cake dessert sweet roll. Chocolate cake tiramisu sweet roll. Biscuit cake powder sweet. Gummi bears bear claw donut dragée. Sesame snaps ice cream cookie pastry lollipop topping. Chocolate fruitcake cake. Halvah oat cake oat cake. Oat cake soufflé lemon drops cheesecake dessert.</p>
</section>

<section>
    <h3>3D Folding Panels Tutorials</h3>
    <div class="panel">&hearts; &#9992;</div>
    <p>Danish apple pie tootsie roll donut fruitcake gingerbread cupcake pudding jujubes. Bear claw macaroon dragée donut tart topping. Ice cream cookie sweet roll cotton candy chocolate bar toffee. Candy canes lemon drops halvah chupa chups cake dessert sweet roll. Chocolate cake tiramisu sweet roll. Biscuit cake powder sweet. Gummi bears bear claw donut dragée. Sesame snaps ice cream cookie pastry lollipop topping. Chocolate fruitcake cake. Halvah oat cake oat cake. Oat cake soufflé lemon drops cheesecake...

CSS

body {margin: 2em;}
section {
    background: #ececec; border: 1px solid #bdbdbd; width: 350px; padding: 1em; position: relative; display: inline-block; margin: 0px;
    perspective: 500;
    height:200px;
    box-sizing:border-box;
    transition:all 100ms linear;position:relative;
}
section:hover{
    height: 170px;
    margin-top: -60px;
}
section:hover .panel {
    transform: rotateX(180deg);
    top:0px;
    background:#a8a8a8;
}
.panel {
    perspective:100;
    position: absolute; top: 0px; left: 0; z-index: 10;
    width: 100%; padding: 0 1px; height: 30px; line-height:30px;
    left:-1px;
    background: #333; color: #fff; font-weight: bold; font-size: 18px;
    transition: all 300ms cubic-bezier(.8,.15,.16,.96);
    transform: rotateX(255deg);
    transform-style: preserve-3d;
    transform-origin: 100% 0;
    backface-visibility: none;
}

p{
    height:95%;
    overflow:hidden;
}