html - 翻转图像垂直 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 原点超过一半高度。(最后你需要把卡片换个方向。)

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