CSS3立体翻转效果

HTML结构：

<div class="wrap">
<!-- 还是要多加一层，因为perspective只对子元素有效 -->
    <div class="flip">
        <div class="front">
            ![](img/1.jpg)
        </div>
        <div class="back">
            ![](img/2.jpg)
        </div>
    </div>
</div>

CSS思路：

1. 父元素flip相对定位，子元素front,back绝对定位
2. 背面隐藏backface-visibility: hidden;
3. 使被转换的子元素保留其 3D 转换transform-style: preserve-3d;。Firefox 支持 transform-style 属性，Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
4. 定义 3D 元素距视图的距离，以像素计，其子元素会获得透视效果perspective: 1000px;。目前浏览器都不支持 perspective 属性，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。注意300px太少了，感觉旋转的时候离屏幕太近了。
5. back沿着Y轴旋转到背面transform: rotateY(180deg);
6. containerhover时，整个flip沿着Y轴旋转

CSS代码：

        .flip, .front, .back{
            width: 400px;
            height: 300px;
        }
        .wrap, .flip{
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            perspective: 1000px;
            /* 300px太小了 */
            -webkit-perspective: 1000px;
        }
        .flip{
            position: relative;
            transition: all 1s;
        }
        .front, .back{
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back{
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
        }

        .wrap:hover .flip{
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
        }

扩展

1. 增加立体效果：改变旋转的基点，且在旋转的同时平移。

        .flip{
            position: relative;
            transition: all 1s;
            transform-origin:0% 50%;
            -webkit-transform-origin:0% 50%;
            -ms-transform-origin:0% 50%;
            -moz-transform-origin:0% 50%;
            -o-transform-origin:0% 50%;
        }
        .wrap:hover .flip{
            transform: translate(400px,0px) rotateY(180deg);
            -webkit-transform:  translate(400px,0px) rotateY(180deg);
            -ms-transform:translate(400px,0px) rotateY(180deg);
            -moz-transform:translate(400px,0px) rotateY(180deg);
            -o-transform: translate(400px,0px) rotateY(180deg);
        }

2. 点击旋转：给container增加正面/背面类名，通过判断是否含有相应类名来更改类名，实现翻面。

    function turn(){
        $(".wrap").hasClass("wrap-front")?$(".wrap").removeClass("wrap-front").addClass("wrap-back"):$(".wrap").removeClass("wrap-back").addClass("wrap-front");
    }

参考文章：

https://segmentfault.com/a/1190000003903190?_ea=423493