css 3D背景反转实现
body{
/* 透视 */
perspective: 800px;
}
div{
transform-style:preserve-3d;
width:259px;
height:396px;
margin: 100px auto;
position: relative;
}
div img{
position: absolute;
width:259px;
height:396px;
left:0;
top:0;
transition: all linear 2s;
z-index: 0;
}
div img:nth-child(1){
/* 这张图片背向我们的时候能否看到 */
backface-visibility:hidden;
z-index: 1;
}
div:active img{
transform:rotateY(180deg)
}图片可以自定义，这里我随便放置，不做要求
<div id="box">
<img src="./pkOne.jpg" alt="">
<img src="./pkTwo.jpg" alt="">
</div>