js实现3D旋转效果

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

实现效果：

实现过程：

步骤一：先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).

步骤二：给盒子和图片,设置对应的样式

 *{
  margin: 0;
  padding: 0;
 }
 body {
  background-color: #000;
  
 }
 #box{
  width:133px;
  height: 200px;
  margin: 200px auto;
  position:relative;
  border: 1px solid #fff;
  transform-style: preserve-3d;
  
  
  
  transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;    deg);


 }
 #box img{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 5px #fff;
  
  
  
  -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
  
 }

第三步： js

附件：完整版代码

 
 
 
 *{
  margin: 0;
  padding: 0;
 }
 body {
  background-color: #000;
 }
 #box{
  width:133px;
  height: 200px;
  margin: 100px auto;
  position:relative;
  
  transform-style: preserve-3d;
  
  
  
  transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;      }
 #box img{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 5px #fff;
  
  -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
  
  
 }

 



 
 
 
 
 
 
 
 
 
 
 
 


 

最后附上源码地址  

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