菜單激活觸發器使用CSS轉換的div對象

Question

我試圖在點擊每個特定的菜單按鈕時激活css轉換。我在找一個要實現的CSS轉換爲旋轉Y：180

（見這裏http://desandro.github.io/3dtransforms/examples/card-01.html）

正如你可以在小提琴看，我有它由4塊方形菜單。我用'About'作爲小提琴的一個例子。有沒有一種方法來設置，然後將激活整個菜單容器的父母div旋轉Y 180度，並顯示塊翻轉周圍的信息？

我在想的是設置了一個父div，它包含了整個菜單容器，當點擊「About」時，它激活了可以翻轉到新頁面的div id。參考使用上面的鏈接，並作爲藍色方面是菜單，紅色方面是關於信息。

我的想法是這樣的：div class flip是實際在菜單容器中翻轉的類，然後id About將在翻轉時顯示的屬性。

<div class="flip"> 
<div id="about"> 


<div class="menupos"> 
<div id="fade"> 
    <ul class="square-menu"> 
    <li> 
     <a href="#" class="slink-x">Home</a> 
    </li> 
    <li> 
     <a href="#about" class="slink-y">About</a> 
    </li> 
    <li> 
     <a href="#" class="slink-y">News</a> 
    </li> 
    <li> 
     <a href="#" class="slink-x">Contact</a> 
    </li> 
    <br style="clear:both;"/> 
    </ul> 
</div> 
</div> 

</div> 

http://jsfiddle.net/ctf1ew43/

Answer 1

您可以使用JavaScript爲檢查撥弄鏈接，請。我希望這就是你需要的。

http://jsfiddle.net/dezae2es/12/

// HTML 

<div class="container"> 

    <div class="card effect__click"> 
     <div class="card__front"> 
      <span class="card__text">front</span> 
     </div> 
     <div class="card__back"> 
      <span class="card__text">back</span> 
     </div> 
    </div> 

</div> 


// Javascript 

(function() { 
    var cards = document.querySelectorAll(".card.effect__click"); 
    for (var i = 0, len = cards.length; i < len; i++) { 
    var card = cards[i]; 
    clickListener(card); 
    } 

    function clickListener(card) { 
    card.addEventListener("click", function() { 
     var c = this.classList; 
     c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); 
    }); 
    } 
})(); 


// CSS 

.container { 
    width: 200px; 
    height: 260px; 
    position: relative; 
    margin: 100px auto; 
    border: 1px solid #CCC; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
} 

.card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    font-size: 140px; 
    text-align: center; 
} 

/* card fronts and backs */ 
.card__front, 
.card__back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.card__front, 
.card__back { 
    -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
    -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__front { 
    background-color: #ff5078; 
} 

.card__back { 
    background-color: #1e1e1e; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
} 

/* card text */ 
.card__text { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    height: 20px; 
    color: #fff; 
    font-family: "Roboto Slab", serif; 
    line-height: 20px; 
} 

/* click effect */ 
.card.effect__click.flipped .card__front { 
    -webkit-transform: rotateY(-180deg); 
     transform: rotateY(-180deg); 
} 

.card.effect__click.flipped .card__back { 
    -webkit-transform: rotateY(0); 
     transform: rotateY(0); 
}