纯CSS3 rotateY双面翻转

所以我正在玩 CSS3和 HTML5 on my page试图保持最新.我正在玩新的CSS转换的rotateY设置,我想知道是否有一种方法来翻转它有两个不同的边但只使用CSS和HTML.我搜索了互联网,没有找到任何教程.

无论如何,我想出了这个. (也可以在上面的链接中找到,靠近页面底部.)

当然,要看到这种效果,必须在Webkit浏览器中查看.

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

是的,我意识到对于这么简单的动作来说可能是太多的标记,但我想看看它是否可能.

所以我的问题是,我编造了这种技术,但有没有找到更好,更有效的技术？或者,有没有更好/更有效的方式来做我做的事情？

谢谢

解决方法

怎么样：

HTML

<div class="flip1">
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
</div>
<div class="flip2">
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
</div>

CSS

div {
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:linear;
    -webkit-backface-visibility: hidden;
    color: blue;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    padding: 20px;
    position: absolute;
}

@-webkit-keyframes flip1 {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

div.flip1 {
    -webkit-animation-name: flip1;
}

@-webkit-keyframes flip2 {
    from { -webkit-transform: rotateX(-180deg); }
    to { -webkit-transform: rotateX(180deg); }
}

div.flip2 {
    -webkit-animation-name: flip2;
}