翻转图像垂直3D CSS

Question

基本HTML

<div class="container"> 
    <div class="wrapper"> 
    <div class="im-fix"><img src="foo.jpg"></div> 
    <div class="img-closed"><img src="foo-close.jpg"></div> 
    <div class="img-open"><img src="foo-open.jpg"></div> 
    </div> 
</div> 

有了，我有一个在屏幕上的基本形象，我需要做的是使用CSS3 我的CSS是这样的模仿一个信封开幕：

.img-closed { 
    position: absolute;bottom: 163px; 
    transition:width 2s, height 2s, background-color 2s, transform 2s; 
} 
.img-open:hover { 
    -moz-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 
} 

但我的一切是一样的东西狙击轮我不希望这样，我希望它“开拓”，当它打开它显示了不同的信息里面..

Answer 1

This tutorial是一个很好的开始。 1.用rotateX翻转轴。 2. transform起源高度的一半。 （最后你需要以另一种方式旋转卡。）

评论还包括一个有用的跨浏览器讨论。