CSS unfolding box animation

Question

I've got some boxes (think oblong chocolate boxes) that I want to unfold and show the contents of. The content will be another div with text, video etc., but I'm currently concerned with the unfolding animation itself.

I've got it sort of working, but the top two divs leave a gap between them while animating. Is there some way I can link them together while 'unfolding' them?

Demo: JSFiddle

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>

Javascript:

$(document).ready(function(){
    $(".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});
}

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: 0.5s;
     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: 100ms;
  }

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


  /* Positioning of the different faces of the block */
  .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
  {
     -webkit-transform: rotateX(-90deg) translateZ(100px);
     -moz-transform: rotateX(-90deg) translateZ(100px);
     -ms-transform: rotateX(-90deg) translateZ(100px);
     transform: rotateX(-90deg) translateZ(100px);
  }

  .block3d .front 
  {
     -webkit-transform: translateZ(100px);
     -moz-transform: translateZ(100px);
     -ms-transform: translateZ(100px);
     transform: translateZ(100px);

  }



  /* Div content styling */
  .block3d h4, .block3d ul
  {
     margin-left: 480px;
     background-color: #323232;
     margin-top: 0;
  }

  .block3d h4
  {
     font-size: 20px;
     text-align: center;
     padding-top: 90px;
     height: 110px;
     width: 300px;
  }

  .block3d ul
  {
     padding: 40px;
     height: auto;
     width: 220px;
  }

  .block3d .infolink
  {
     display: block;
     margin-left: 455px;
     height: 30px;
     width: 100px;
     color: #ffffff;
     text-align: center;
     padding: 2px;
     border: 1px dashed #FFFFFF;
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     border-bottom: 0;
  }


  /* Open animations for the different parts */
  .open .block3d .top
  {
     -webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
     -moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
     transform: rotateX(-360deg) translateY(-200px) translateZ(100px);


     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 0s;
  }

  @-webkit-keyframes openback
  {
     0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
     100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  @-moz-keyframes openback
  {
     0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {-moz-transform: rotateX(270deg) translateZ(300px)}
     100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  @keyframes openback
  {
     0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {transform: rotateX(270deg) translateZ(300px)}
     100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  .open .block3d .back
  {
     -webkit-animation: openback 1s 1 linear forwards;
     -moz-animation: openback 1s 1 linear forwards;
     animation: openback 1s 1 linear forwards;

  }

  .open .block3d .bottom
  {
     -webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
     -moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
     transform: rotateX(-360deg) translateZ(100px) translateY(200px);

     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 0.0s;

  }

  /* Move the block into place */
  .open .block3d
  {
     -webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
     -moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
     transform: translateZ(100px) rotateX(180deg) translateY(-440px);

     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 1s;
     transition-delay: 0s;

  }

Answer 1

If you are looking for cool paper fold/unfolding animations take a look at this tutorial and here is the code on git. I'd look specifically the pfold.jquery.js file in order to achieve this sort of animation.

Although it might take a little tweaking of the js/css to get it to look how you want since this is for unfolding paper instead of unwrapping a box, but the basic animation is there.

Answer 2

You can add a 1px pseudo element to the top and bottom of the intersecting elements. You may want to add this during the animation and then remove it after so you don't see extra space when it has stopped.

Here is a JSFiddle

Relevant CSS

.back {
    position: absolute;
    top: -1px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.block3d h4
{
    display: block;
    position: absolute;
    top: -1px;
    font-size: 20px;
    text-align: center;
    padding-top: 90px;
    height: 110px;
    width: 300px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #323232;    
}
.block3d h4:before,
.back:before {
    top: -1px;
}
.block3d h4:after,
.back:after {
    bottom: -1px;
}