title: Menu to activate trigger Div target using CSS transitions
body: <p>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. </p>
  
  <p>(see here <a href="http://desandro.github.io/3dtransforms/examples/card-01.html" rel="nofollow">http://desandro.github.io/3dtransforms/examples/card-01.html</a>)</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <pre><code>&lt;div class="flip"&gt;
  &lt;div id="about"&gt;
  
  
  &lt;div class="menupos"&gt;
  &lt;div id="fade"&gt;
    &lt;ul class="square-menu"&gt;
       &lt;li&gt;
         &lt;a href="#" class="slink-x"&gt;Home&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#about" class="slink-y"&gt;About&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#" class="slink-y"&gt;News&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
         &lt;a href="#" class="slink-x"&gt;Contact&lt;/a&gt;
       &lt;/li&gt;
      &lt;br style="clear:both;"/&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/ctf1ew43/" rel="nofollow">http://jsfiddle.net/ctf1ew43/</a></p>