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

Question

我正在尝试在单击每个特定菜单按钮时激活 css 转换。我要实现的 CSS 转换是 rotateY: 180。

(参见此处 http://desandro.github.io/3dtransforms/examples/card-01.html)

正如您在 fiddle 中看到的，我有一个由 4 个 block 组成的方形菜单。我在 fiddle 中以“关于”为例。有没有办法设置然后激活整个菜单容器的父级 div 旋转 180 度并在翻转的 block 上显示关于信息？

我的想法是设置一个包含整个菜单容器的父 div，当单击“关于”时，它会激活 div id，该 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

请为该检查 fiddle 链接使用 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);
}