小编Liz*_*zan的帖子

我有一些盒子(想想椭圆形的巧克力盒子),我想展开并展示其中的内容.内容将是另一个带有文本,视频等的div,但我现在关注展开的动画本身.

我已经有了它的工作,但前两个div在动画时留下了它们之间的差距.有什么方法可以将它们链接在一起,同时"展开"它们？

演示: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: …