H5页面制作3D效果

perspective 

W3shool中的定义：

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

perspective-origin

W3shool中的定义：

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

HTML：

<div class="content">
     <img src="images/yicheng.jpg" class="zhanglao">
     <div class="box">
          <img src="images/lazhu.png" alt="">
          <img src="images/lazhu.png" alt="">
          <img src="images/lazhu.png" alt="">
          <img src="images/lazhu.png" alt="">
     </div>
</div>

CSS：

元素添加position：absolute;属性，然后使用Rotate属性，使元素旋转到指定方向，使用translate属性，控制元素之间的距离。

.content{
    text-align: center;
    perspective:1500px; /* 设置在父元素上 */
    perspective-origin: 0 0; 
    -webkit-perspective-origin: 0 0;
    .box{
      position: relative;
      transform-style: preserve-3d; /*设置在需要3D效果的元素上*/
      img{
        width: 100px;
        height: 100px;
        position: absolute;
        &:nth-of-type(1){
          transform: rotateY(0) translateZ(90px);
        }
        &:nth-of-type(2){
          transform: rotateY(90deg) translateZ(90px);
        }
        &:nth-of-type(3){
          transform: rotateY(180deg) translateZ(90px);
        }
        &:nth-of-type(4){
          transform: rotateY(270deg) translateZ(90px);
        }
      }
    }
  }

JS:

var angle=1;
    setInterval(function(){
        $(".box").css({
            transform:"rotateY("+angle+"deg)",
            transformOrigin:"center center 0"
        });
        angle+=1;
    },20);