js实现3D旋转相册

本文实例为大家分享了js实现3D旋转相册的具体代码，供大家参考，具体内容如下

效果展示：

使用图片：

剩余自己随意 图片大小为133*200

代码展示：

 
 
 
  * {
   background-color: #000;
 
  }
 
  .container {
   border: 1px solid yellow;
   perspective: 800px;
   overflow: hidden;
  }
 
  .box {
   position: relative;
   border: 1px solid #f00;
   width: 133px;
   height: 200px;
   margin: 300px auto;
   transform-style: preserve-3d;
   transform:rotateX(-20deg) rotateY(0deg);
  }
 
  img {
   position: absolute;
   
   -webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));
  }
 
 



 
  
  
  
  
  
  
  
  
  
  
  
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。