如何使用CSS翻转多个div？

Question

当我点击菜单时，如何使用CSS3翻转多个

？

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

：

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

有什么建议吗？

- Jad Chahine

---

请注意，您可以通过使用toggleClass来更改整个if语句块 ;) - Toni Michel Caubet

Answer 1

当使用两个元素进行翻转动画时，非常简单，因为只有一个背面和一个正面。但是如果需要用多个元素来实现同样的效果，则变得更加复杂，因为您需要维护三种状态，分别如下：

- 翻转：当块进入视图且旋转为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 代码可以进一步优化，但我将把微调部分留给您。

- Harry

---

很好的回答，但是这里似乎有些问题。在其他任何操作之前，点击最后一个链接（联系方式），并执行console.log($(activeTab).next('.flipper'));。你将获得一个带有长度为0的jQuery集合，并且“after”类将被添加到前一个兄弟节点上，这将破坏动画效果。 - DavidDomain

@DavidDomain：很好的发现 :) 让我看看我能否解决它。 - Harry

@DavidDomain：我稍微修改了一下，使动画无论顺序如何都可以工作。不过需要进行小幅度的不透明度更改，而我没有办法在不进行更改的情况下实现它。 - Harry

@JadChahine：不用谢，很高兴我能帮到你 :) - Harry

Answer 2

我相信这就是您要找的内容。

$(".nav li").on("click", function(){
    
    var activeTab = $(this).find("a").attr("href");
    if($(activeTab).hasClass('current-flipper'))
        return;
    //  alert(activeTab);
    $("#card").find('div').removeClass('current-flipper');
    $(activeTab).addClass('current-flipper');
    $("#card").toggleClass("flipped");    
    return false;
});

.flipper{
    display: none;
}

.current-flipper.flipper{
    display: block;
}

.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( 360deg );
         -moz-transform: rotateX( 360deg );
           -o-transform: rotateX( 360deg );
              transform: rotateX( 360deg );
    }

    #card .flipper {
      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}
#home{
    background:red;
}
#about{
    background:blue;
}
#work{
    background:green;
}
#contact{
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 current-flipper" id="home">home</div>
      <div class="flipper" id="about">about</div>
      <div class="flipper" id="work">work</div>
      <div class="flipper" id="contact">contact</div>
    </div>
  </section>

- Ivan

Answer 3

我认为你只看到了最后两个，因为它们叠在前两个上面。实际上，卡片本身（具有 .front/.back 类的元素）在你旋转 #card 时保持不动。

也许你可以尝试独立旋转 .front/.back 元素。这意味着手动处理交互，但在我看来更容易理解。

希望能帮到你。

- SuperJumbo