A：我今天照了張照片做了桌面背景感覺還不錯。
B：一張照片當(dāng)桌面背景算什么，我的桌面背景是來回切換的。
C：切，2D還好意思拿出來說，俺的3D輪播照片都快用膩了，俺想著要不去外星球體驗一下超高維空間。

圖片.png

20170927_110923.gif

一、扎馬步

馬步0之transform-style

transform-style屬性也是3D效果中經(jīng)常使用的，其兩個參數(shù)，flat|preserve-3d. 前者flat為默認(rèn)值，表示平面的；后者preserve-3d表示3D透視。

馬步1之rotateXYZ

3d_axes.png

1506484938(1).png

1506484966(1).png

1506484985(1).png

馬步2之translateZ

translateZ( tz )，如果，原始圖像（tz=0）正對你，那么tz的值越大，離你就越近，反之越遠(yuǎn)。tz>0,圖像向屏幕走來，并且圖像很大，tz<0圖像遠(yuǎn)離屏幕，圖像變小。

1506485492(1).png

馬步3之Perspective

perspective ，是透視，視角。

toushi.png

css3所用的透視點(diǎn)在瀏覽器前方，可以理解為我們的眼睛為視點(diǎn)。
在次引用一下大張老師的解釋

一個1680像素寬的顯示器中有張美女圖片，應(yīng)用了3D transform，同時，該元素或該元素父輩元素設(shè)置的perspective大小為2000像素。則這張美女多呈現(xiàn)的3D效果就跟你本人在1.2個顯示器寬度的地方(1680*1.2≈2000)看到的真實效果一致??！

3d-distance.jpg

那么，如果perspective：2000px，translateZ:2100px，那么，該圖像將會越過您的眼睛100px，自然您也看不見這幅圖像了，有誰能看見腦后的東西呢。

perspective有兩種書寫方式
perspective屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當(dāng)前動畫元素上，與transform的其他屬性寫在一起。如下代碼示例
第一種：整體透視（理解為有一個透視點(diǎn)，透視整個父元素，子元素配合父元素）

#blue {
  perspective: 400px;
}

#blue figure {
  background: blue;
  transform: rotateY( 45deg );
}

1506494718(1).png

第二種（每一個子元素都有一個透視點(diǎn)）

#red figure {
  background: red;
  transform: perspective( 400px ) rotateY(45deg);
}

1506494770(1).png

另外，透視點(diǎn)的默認(rèn)位置在中間perspective-origin: 50% 50%;，我們可以對透視點(diǎn)作出調(diào)整。

perspective-origin: 25% 75%;

1506494932(1).png

基本功咱有了，那么，還等什么，一起來練武吧。

二、練神功

首先我們實現(xiàn)靜態(tài)效果。思路：用4個div，分別為ABCD。然后，用rotateXYZ讓ABCD轉(zhuǎn)至4個方向，然后使用translateZ或translate3d（0,0，n）將ADBC拉開間隔，否則交叉在一起。動態(tài)效果：ABCD依次旋轉(zhuǎn)。分4次：A占據(jù)B的位置，B占C，C占D，換4次位置為一個循環(huán)。在此，貼上含A代碼，其他部分實現(xiàn)原理相同。您也可以移駕全部代碼.

#wrap {
    height: 100px;
    width: 100px;
    transform-style: preserve-3d;
    backface-visibility: visible;
    margin: 200px auto;
    perspective: 500px;
}

.common {
    position: absolute;
    height: 100px;
    width: 100px;
    line-height: 100px;
    font-size: 100px;
    text-align: center;
}

@keyframes fChange {
    0% {
        transform: translate3d(0, 0, 160px);
    }
    5% {
        transform: translate3d(0, 0, 160px);/*每次換位置后，停留0.3s*/
    }

    25% {
        transform: rotateY(-80deg) translate3d(0, 0, 160px);
    }
    30% {
        transform: rotateY(-80deg) translate3d(0, 0, 160px);/*每次換位置后，停留0.3s*/
    }

    50% {
        transform: rotateY(-180deg) translate3d(0, 0, 160px);
    }
    55% {
        transform: rotateY(-180deg) translate3d(0, 0, 160px);/*每次換位置后，停留0.3s*/
    }

    75% {
        transform: rotateY(-280deg) translate3d(0, 0, 160px);
    }
    80% {
        transform: rotateY(-280deg) translate3d(0, 0, 160px);/*每次換位置后，停留0.3s*/
    }

    100% {
        transform: translate3d(0, 0, 160px);
    }
}

神功練好了，但是千萬不要驕傲哦，習(xí)武之人，怎能滿足當(dāng)下一種功夫。

20170630015503752.jpg