CSS3实现卡片翻转效果

<div class="big">
            <div class="main">
                <div class="first">
                    <img src="img/****1.jpg" alt="">
                </div>
                <div class="second">
                    <img src="img/****2.jpg" alt="">
                </div>
            </div>
        </div>

.big {
    width: 400px;
    height: 400px;
    margin: 100px auto;
}
.main {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 800px;
    transform-style: preserve-3d;
    transition: 2s linear;
    /* 3d代码 */
}
.main:hover {
     transform: rotateY(180deg);
}
.first {
     position: absolute;
     width: 100%;
     height: 100%;
}
.second {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     /*backface-visibility:hidden;属性，
     我们可以使一个元素在翻转之后消失，
     这是可以使用另一个元素放在它的背面，
     从而制作出一种元素翻转之后出现另一个元素的效果。*/
     transform: rotateY(180deg);
}
img {
     width: 100%;
     height: 100%;
}