商品翻牌效果（纯css）-白红宇

商品翻牌效果（纯css）

阅读量：4677 次

发布时间：2019-06-09

本文共 859 字，大约阅读时间需要 2 分钟。

html代码：

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

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

转载于:https://www.cnblogs.com/ash-sky/p/9585778.html

你可能感兴趣的文章