如何使用CSS翻转多个div？

Question

div使用CSS3单击菜单时如何翻转多个？

这段代码仅适用于最后两个div：

HTML代码

<ul class="nav">
   <li><a href="#home">home</a></li>
   <li><a href="#about">about</a></li>
   <li><a href="#work">work</a></li>
   <li><a href="#contact">contact</a></li>
</ul>
<section class="container">
   <div id="card">
      <div class="front flipper" id="home">home</div>
      <div class="back flipper" id="about">about</div>
      <div class="front flipper" id="work">work</div>
      <div class="back flipper" id="contact">contact</div>
   </div>
</section>

CSS代码

    .container {
    width: 500px;
    height: 360px;
    position: relative;
    margin: 0 auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#card.flipped {
    -webkit-transform: rotateX( 180deg);
    -moz-transform: rotateX( 180deg);
    -o-transform: rotateX( 180deg);
    transform: rotateX( 180deg);
}
#card .flipper {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flipper {
    background: #963
}
#card .front {
    background: red;
}
#card .back {
    background: blue;
    -webkit-transform: rotateX( 180deg);
    -moz-transform: rotateX( 180deg);
    -o-transform: rotateX( 180deg);
    transform: rotateX( 180deg);
}

JavaScript代码

   $(".nav li").on("click", function() {

    var activeTab = $(this).find("a").attr("href");

    //  alert(activeTab);

    if ($("#card").hasClass("flipped")) {
        $("#card").removeClass("flipped");
    } else {
        $("#card").addClass("flipped");
    }

    return false;
});

有什么建议么 ？

Answer 1

与两个元素一起使用时，翻转动画是一种非常简单的动画，因为它有一个背面和一个正面。但是，当需要使用许多元素来实现相同功能时，则变得更加复杂，因为您需要维护以下3种状态：

• 翻转-出现块时，旋转为0度（基本上不旋转）。
• 之前-这是翻转元素之前的元素的状态。在这种状态下，块沿一个方向旋转180度。
• 之后-这是元素在翻转元素之后的状态。在此状态下，块沿相反方向旋转180度。

因此，基本上，当单击链接时，将块从0旋转到180度之前，将目标块本身从-180度旋转到0度（下一个元素保持在-180度）。进行这些操作可使其具有链旋转的外观。

$(".nav li a").on("click", function() {
  var activeTab = $(this).attr("href");
  $('#card > div').removeClass('flipped after before');
  $(activeTab).addClass('flipped');
  $(activeTab).prevAll('.flipper').addClass('before');
  $(activeTab).nextAll('.flipper').addClass('after');
  return false;
});

.container {
   width: 500px;
   height: 360px;
   position: relative;
   margin: 0 auto 40px;
   border: 1px solid #CCC;
   -webkit-perspective: 800px;
   -moz-perspective: 800px;
   -o-perspective: 800px;
   perspective: 800px;
 }
 #card {
   width: 100%;
   height: 100%;
   position: absolute;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
 #card .flipper {
   display: block;
   height: 100%;
   width: 100%;
   line-height: 260px;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 140px;
   position: absolute;
   -webkit-transition: -webkit-transform 1s, opacity 1s;
   -moz-transition: -moz-transform 1s, opacity 1s;
   -o-transition: -o-transform 1s, opacity 1s;
   transition: transform 1s, opacity 1s;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   background: blue;
   opacity: 0;
 }
 #card .flipper:nth-child(2n) {
   background: red;
 }
 #card .flipper.flipped {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   z-index: 1;
   opacity:1;
 }
 #card .flipper.before {
   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);
 }
 #card .flipper.after {
   -webkit-transform: rotateX(-180deg);
   -moz-transform: rotateX(-180deg);
   -o-transform: rotateX(-180deg);
   transform: rotateX(-180deg);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#home">home</a>
  </li>
  <li><a href="#about">about</a>
  </li>
  <li><a href="#work">work</a>
  </li>
  <li><a href="#contact">contact</a>
  </li>
</ul>
<section class="container">
  <div id="card">
    <div class="flipper flipped" id="home">home</div>
    <div class="flipper after" id="about">about</div>
    <div class="flipper after" id="work">work</div>
    <div class="flipper after" id="contact">contact</div>
  </div>
</section>

注意： jQuery代码可以进一步优化，但是我将把微调部分留给您。