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