Как перевернуть несколько div с помощью CSS?

Question

Как я могу перевернуть несколько div, когда я нажал на меню, используя CSS3?

This код работает только в двух последних 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 градусов (в основном нет вращения).
• Before - Это состояние элементов, которые находятся перед перевернутым элементом. В этом состоянии блок поворачивается на 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 можно оптимизировать и дальше, но я оставлю тонкой настройки части к вам.

Answer 2

Я думаю, что вы видите только последние два, потому что они складываются поверх первых двух. По сути, сами карты (элементы с классами .front/.back) остаются неподвижными, пока вы вращаете #card вокруг них.

Возможно, вы можете попробовать самостоятельно поворачивать элементы .front/.back. Это означает ручную обработку взаимодействия, но, на мой взгляд, легче рассуждать.

Надежда, что помогает

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"> 
 
\t <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>