翻轉圖像垂直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起源高度的一半。 （最後你需要以另一種方式旋轉卡。）

評論還包括一個有用的跨瀏覽器討論。