JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<section>
                  <div class="block3d">
                     <div class="front">
                        <h4>CHOCOLATE</h4>
                     </div>
                     <div class="top"><h4></h4></div>
                     <div class="back">
                        <ul>
                           <li>Chocolate</li>
                           <li>Milk</li>
                           <li>Nuts</li>
                           <li>Oranges</li>
                        </ul>
                        <a class="infolink" href="#">Open me</a>
                     </div>
                     <div class="bottom"><h4></h4></div>
                  </div>
               </section>

CSS

section
{
   -webkit-perspective: 800px;
   -webkit-perspective-origin: 50% 100px;

   -moz-perspective: 800px;
   -moz-perspective-origin: 50% 100px;

   -ms-perspective: 800px;
   -ms-perspective-origin: 50% 100px;

   perspective: 800px;
   perspective-origin: 50% 100px;

   width: 960px;
   height: 240px;
   margin: 10px auto;

   transition-property: height;
   transition-timing-function: linear;
   transition-duration: 4s;
   transition-delay: 100ms;
}

section.open
{
   height: 960px;
}

.block3d
{
   position: relative;
   width: 960px;
   height: 200px;

   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;

   margin: 0 auto;

   -webkit-transform-origin: 0 100px;
   -moz-transform-origin: 0 100px;
   -ms-transform-origin: 0 100px;
   transform-origin: 0 100px;


   transition-property: transform, display;
   transition-timing-function: linear;
   transition-duration: 0.5s;
   transition-delay: 1000ms;
}

.block3d:hover, .open .block3d
{
   -webkit-transform: rotateX(-180deg);
   -ms-transform: rotateX(-180deg);
   transform: rotateX(-180deg);
}

.block3d div
{
   position: absolute;
   width: 960px;
   height: 200px;

   background-color: rgba(0,0,0,0.4);
   color: #FFFFFF;
}

.block3d .back
{
   -webkit-transform: translateZ(-100px) rotateX(180deg);
   -moz-transform: translateZ(-100px) rotateX(180deg);
   -ms-transform: translateZ(-100px) rotateX(180deg);
   transform: translateZ(-100px) rotateX(180deg);
    
   background-color: #323232;
}

.block3d .top
{
   -webkit-transform: rotateX(-270deg) translateY(-100px);
   -webkit-transform-origin: top center;

   -moz-transform: rotateX(-270deg) translateY(-100px);
   -moz-transform-origin: top center;

   -ms-transform: rotateX(-270deg) translateY(-100px);
   -ms-transform-origin: top center;

   transform: rotateX(-270deg) translateY(-100px);
   transform-origin: top center;
}

.block3d .bottom
{
  ...

JavaScript

$(".block3d .infolink").click(function(e){
      openBlock(this, e);
   });


function openBlock(element, event)
{
   event.preventDefault();

   $(element).closest('section').addClass('open');
   $.scrollTo($(element).closest('section'), {duration: 1000});
}