Question

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

This代码仅适用于最后两个div s：

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度。
After - 这是在翻转元素之后的元素的状态。在这种状态下，块沿相反方向旋转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代码可以进一步优化，但我会将微调部分留给您。

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>

Answer 3

我认为你只看到最后两个，因为它们正在堆叠在前两个之上。基本上卡片本身（具有.front / .back类的元素）在你围绕它们旋转#card时保持静止。

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

希望有所帮助

如何使用CSS翻转多个div？

3 个答案: