Question

我试图点击每个特定菜单按钮激活css过渡。我想要实现的CSS转换是rotateY：180。

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

正如你在小提琴中看到的那样，我有一个由4个方块组成的方形菜单。我用过＆＃39;关于＆＃39;作为小提琴中的一个例子。有没有办法设置然后将激活整个菜单容器的父级div旋转180度并显示有关翻转的块的有关信息？

我在想的是设置一个包含整个菜单容器的父div，以及何时＆＃34;关于＆＃34;单击它，它会激活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);
}

使用CSS过渡激活触发Div目标的菜单

1 个答案: