Pure CSS3 rotateY flip with two sides

Question

Hey all,

So I was playing around with CSS3 and HTML5 on my page 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.

Anyway, I came up with this. (Can also be found at the link above, near the bottom of the page.)

Of course, to see this effect, it must be viewed in a Webkit browser.

HTML

<div class="flip">
 <div>
 <img src="images/yyc.jpg" alt="Calgary International Airport"/>
  <section>
  <h3>Image Metadata</h3>
  <p><strong>Where:</strong> Calgary International Airport</p>
  <p><strong>When:</strong> July 25, 2008</p>
  <p><strong>Camera:</strong> Canon EOS 30D</p>
  <p><strong>Photographer:</strong> <a href="http://photo.net/photos/Vian" title="Photo.net">Vian Esterhuizen</a></p>
  </section>
 </div>
</div>

CSS

.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 > 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 > div img{
    float:left;
    width:421px;
    height:237px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0;
    -webkit-transition-delay: 0.3s;
}
.flip > div > 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 > div{
    left:-421px;
}
.flip:hover > div img, .flip:hover > div > section{
    -webkit-transform: rotateY(180deg);
}

Yes, I realize that's probably way too much markup for such a simple action but I wanted to see if it's possible.

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?

Thank you