title: Pure CSS3 rotateY flip with two sides
body: <p>So I was playing around with CSS3 and HTML5 <a href="http://www.heyvian.com/html5-css3/" rel="nofollow">on my page</a> trying to keep up to date. I was playing with the rotateY setting of the new CSS transform and I was wondering if there was a way to flip something over that it has two different sides but using only CSS and HTML. I searched the Internet and didn't find any tutorials.</p>
  
  <p>Anyway, I came up with this. (Can also be found at the link above, near the bottom of the page.)</p>
  
  <p><em>Of course, to see this effect, it must be viewed in a Webkit browser.</em></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flip"&gt;
   &lt;div&gt;
   &lt;img src="images/yyc.jpg" alt="Calgary International Airport"/&gt;
    &lt;section&gt;
    &lt;h3&gt;Image Metadata&lt;/h3&gt;
    &lt;p&gt;&lt;strong&gt;Where:&lt;/strong&gt; Calgary International Airport&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; July 25, 2008&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;Camera:&lt;/strong&gt; Canon EOS 30D&lt;/p&gt;
    &lt;p&gt;&lt;strong&gt;Photographer:&lt;/strong&gt; &lt;a href="http://photo.net/photos/Vian" title="Photo.net"&gt;Vian Esterhuizen&lt;/a&gt;&lt;/p&gt;
    &lt;/section&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flip{
      float:left;
      position:relative;
      width:421px;
      height:237px;
      background:#111;
      border:2px solid #111;
      margin:2px 0;
      -webkit-transition-property: -webkit-transform, background;
      -webkit-transition-duration: 1s, 0;
      -webkit-transition-delay: 0, 0.3s;
      overflow:hidden;
  }
  .flip:hover{
      -webkit-transform: rotateY(180deg);
  }
  .flip &gt; div{
      position:absolute;
      left:0;
      top:0;
      width:842px;
      height:237px;   
      overflow:hidden;
      -webkit-transition-property: left;
      -webkit-transition-duration: 0;
      -webkit-transition-delay: 0.3s;
  }
  .flip &gt; div img{
      float:left;
      width:421px;
      height:237px;
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 0;
      -webkit-transition-delay: 0.3s;
  }
  .flip &gt; div &gt; section{
      float:left;
      width:401px;
      height:217px;
      padding:10px;
      background:top right url('../images/esterhuizen-photography.gif') no-repeat;
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 0;
      -webkit-transition-delay: 0.3s;
  }
  .flip:hover &gt; div{
      left:-421px;
  }
  .flip:hover &gt; div img, .flip:hover &gt; div &gt; section{
      -webkit-transform: rotateY(180deg);
  }
  </code></pre>
  
  <p><em>Yes, I realize that's probably way too much markup for such a simple action but I wanted to see if it's possible.</em> </p>
  
  <p>So my question is, I made up this technique, but is there a better, more efficient one out there that I didn't find? Or, is there a better/more efficient way to do what I did?</p>
  
  <p>Thank you</p>