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

但我所得到的就像是狙击轮，我不想要那样，我希望它能够打开＆＃34;打开＆＃34;当它打开时，它显示内部有不同的信息..

Answer 1

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

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

翻转图像垂直3D css

1 个答案: