[css]纯css制作图片翻转效果

html代码
实现正反面效果的HTML代码，估计你也能想到应该是这样的：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
                <div class="front">
                        <!-- 前面内容 -->
                </div>
                <div class="back">
                        <!-- 背面内容 -->
                </div>
        </div>

正如你想到的，应该有两个容器，分别存放卡片“前面”和“背面”，通过CSS，我们会指定这两个容器元素自己的作用。还有需要注意的是ontouchstart这段js，它能让你使用触屏来触发翻转动作。显然，你应该把这段代码单独提取出来，让JavaScript代码放到一起。


CSS代码

我敢打赌，你会感到惊讶，只需要如此少的代码(如果不考虑各浏览器CSS方言前缀)：


/* entire container, keeps perspective */
.flip-container {
        perspective: 1000;
}
        /* flip the pane when hovered */
        .flip-container:hover .flipper, .flip-container.hover .flipper {
                transform: rotateY(180deg);
        }

.flip-container, .front, .back {
        width: 320px;
        height: 480px;
}

/* flip speed goes here */
.flipper {
        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
}

/* front pane, placed above back */
.front {
        z-index: 2;
}

/* back, initially hidden pane */
.back {
        transform: rotateY(180deg);
}
下面是大概的整个过程的原理：

• 在最外层的容器元素上设置整个动画区域的透视(perspective)属性。
• 当外层容器元素遇到鼠标悬停事件时，内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg，是反向旋转。
• 表示卡片正面和背面的元素都要绝对定位，这样它们才能在相同的位置相互遮挡。它们的背面可视性(backface-visibility)属性设置为隐藏，这样每个卡片的背面在翻转时都是看不见的。
• 将卡片的正面设置为一个比背面要高的z-index值，这样保证卡片的正面在最上面。
• 将背面卡片旋转180度，这样让它扮演背面的角色。

这就是全部这些代码的作用！你把这段代码放到你的网页里，然后修饰一下卡片的样式就行了！


转自：http://www.webhek.com/post/css-flip.html