商品翻牌效果（纯css）

• 
• 
  

 

 

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);
}

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