CSS展开框动画

我有一些盒子（比如长方形巧克力盒），我想打开展示里面的东西。内容将是另一个div，包含文本、视频等，但我目前关注的是正在展开的动画本身

我已经让它的工作排序，但顶部的两个div之间留下了一个间隙，而动画。有什么方法可以在“展开”它们的同时将它们链接在一起

演示：

HTML:

CSS:

---

如果你正在寻找很酷的纸张折叠/展开动画，请看下面的代码。为了实现这种动画，我会特别查看pfold.jquery.js文件

---

虽然可能需要对js/css进行一些调整，以使其看起来像您想要的那样，因为这是用于展开纸张而不是展开盒子，但是基本的动画就在那里

可以将1px伪元素添加到相交元素的顶部和底部。您可能希望在动画期间添加此项，然后在动画结束后将其删除，以便在动画停止时看不到额外的空间

相关CSS

---

你怎么说基本动画在那里？据我所知，这个演示是一次展开一个方向/div，而不是两个方向/div。这意味着你可以调整它，将两个方向/div折叠在一起。啊，好的。等我有时间的时候，我会更仔细地看一看。你用哪种网络浏览器来测试小提琴？在狩猎中看起来很奇怪。@Lizzan我用的是chrome。。。我玩了一些过渡的计时，所以它们不能正确地展开。然而，覆盖交叉点的想法在初始滚动时仍然很清楚。我在Safari中查看了它，虽然它不起作用，但它的功能与您发布的原始小提琴完全相同。

           <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>

$(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});
}

  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;

  }

.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;
}