Menu to activate trigger Div target using CSS transitions

Question

I'm trying to have a css transition activate on click on each specific menu button. The CSS transition I'm looking to implement is rotateY: 180.

(see here http://desandro.github.io/3dtransforms/examples/card-01.html)

As you can see in the fiddle, I have a square menu which consists of 4 blocks. I used 'About' as an example in the fiddle. Is there a way to set the which then would activate a parenting div of the entire menu container to rotateY 180 degrees and display the about information on the block that flipped around?

What I was thinking was set a parent div that contains the entire menu container and when "About" is clicked on, it activates the div id that would flip around to the new page essentially. For reference use the link above and act as if the blue side is the menu, and the red side is the About information.

My thinking was this: div class flip was that class that actually flipped around the menu container, and then the id About would be the attributes that are displayed when flipped around.

<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/

Tolga Mengu Tolga Mengu · Accepted Answer · 2015-01-07T11:10:57

You can use javascript for that check fiddle link, please. I hope that's what you need.

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);
}

Menu to activate trigger Div target using CSS transitions

1 Answers