html代码:

<div class="box">
  <ul>
    <li><span><img src="https://www.cnblogs.com/images/cnblogs_com/ash-sky/1277501/t_lover.png"/></span><span><img src="https://www.cnblogs.com/images/cnblogs_com/ash-sky/1277501/t_world.jpg"/></span></li>                     
    <li><span><img src="https://www.cnblogs.com/images/cnblogs_com/ash-sky/1277501/t_lover.png"/></span><span><img src="https://www.cnblogs.com/images/cnblogs_com/ash-sky/1277501/t_world.jpg"/></span></li>
  </ul>
</div>

css代码:

.box img{
  width:300px
}
.box ul li{
  float: left;
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;        //3d开启
  perspective: 500px;              //有个洞可以展示
  transform: rotateY(5deg);           //看起来有立体感
}
.box li span{
  list-style: none;
  position: absolute;
  width: 300px;
  height: 300px;
  display: block;
  border: 1px solid #000000;
  transition: all .5s linear;
}
.box li span:nth-child(1){
  transform: rotateY(0deg);
  z-index: 2;
}
.box li span:nth-child(2){
  transform: rotateY(180deg);
  z-index: 1;
}
.box li:hover span:nth-child(1){
  transform: rotateY(180deg);
}
.box li:hover span:nth-child(2){
  transform: rotateY(360deg);
}

 感觉以后用的到,于是就分享了,算是重做一次,加深记忆