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



  
  
  
  
  
  
  
  
  
  
  
  

  

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript动画特效与技巧汇总》、《Javascript页面元素操作技巧总结》、《Javascript运动效果与技巧汇总》、《Javascript图形绘制技巧总结》、《Javascript切换特效与技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。