如何使用 CSS 翻转多个 div？

Question

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

This 代码仅适用于最后两个 divs :

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

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

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

希望对您有所帮助

Answer 2

与两个元素一起使用时的翻转动画非常简单，因为有一个背面和一个正面。但是当同样的东西需要用很多元素来实现时，它就变得格外复杂，因为你需要维护 3 个状态，如下所示：

翻转 - 这是当方块进入视野并且旋转为 0 度（基本上没有旋转）。
之前 - 这是翻转元素之前的元素状态。在此状态下，块沿一个方向旋转 180 度。
After - 这是翻转元素之后的元素状态。在此状态下，块沿相反方向旋转 180 度。

所以基本上当点击 link 时，它之前的方块从 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>

Note: The jQuery code can be optimized further but I will leave the fine tuning part to you.

Answer 3

我相信这就是您要找的。

$(".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>

如何使用 CSS 翻转多个 div？

How to flip multiple divs using CSS?

html

javascript

css

jquery

css-transforms