css3 实现两张图片filp效果

html

<div class="filp">
    <img class="front" src="./3.jpg" alt="" />
    <img class="back" src="./4.jpg" alt="" />
</div>

css样式

.filp {
    width: 320px;
    height: 480px;
    position: relative;
    transition: 0.6s;
    /* 设置元素的子元素是位于 3D 空间中还是平面中 */
    transform-style: preserve-3d;
}
.filp:hover {
    transform: rotateY(180deg);
}
.front,.back {
    position: absolute;
    top: 0;
    left: 0;
    /* 指定当元素背面朝向观察者时是否可见 */
    backface-visibility: hidden;
}
.front {
    z-index: 2;
}
.back {
    /* 图片翻转180 */
    transform: rotateY(180deg);
}

该方式不兼IE，兼容IE需要对图片单独添加动画