A：我今天照了張照片做了桌面背景感覺(jué)還不錯(cuò)者疤。
B：一張照片當(dāng)桌面背景算什么，我的桌面背景是來(lái)回切換的叠赦。
C：切驹马，2D還好意思拿出來(lái)說(shuō)，俺的3D輪播照片都快用膩了，俺想著要不去外星球體驗(yàn)一下超高維空間糯累。

圖片.png

20170927_110923.gif

一篮条、扎馬步

馬步0之transform-style

transform-style屬性也是3D效果中經(jīng)常使用的，其兩個(gè)參數(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）正對(duì)你，那么tz的值越大乾闰，離你就越近落追，反之越遠(yuǎn)。tz>0,圖像向屏幕走來(lái)涯肩，并且圖像很大轿钠，tz<0圖像遠(yuǎn)離屏幕，圖像變小病苗。

1506485492(1).png

馬步3之Perspective

perspective 疗垛，是透視，視角硫朦。

toushi.png

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

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

3d-distance.jpg

那么荠割，如果perspective：2000px，translateZ:2100px旺矾，那么蔑鹦，該圖像將會(huì)越過(guò)您的眼睛100px，自然您也看不見(jiàn)這幅圖像了箕宙，有誰(shuí)能看見(jiàn)腦后的東西呢。

perspective有兩種書(shū)寫(xiě)方式
perspective屬性有兩種書(shū)寫(xiě)形式，一種用在舞臺(tái)元素上（動(dòng)畫(huà)元素們的共同父輩元素）部服；第二種就是用在當(dāng)前動(dòng)畫(huà)元素上，與transform的其他屬性寫(xiě)在一起狡门。如下代碼示例
第一種：整體透視（理解為有一個(gè)透視點(diǎn)，透視整個(gè)父元素锅很，子元素配合父元素）

#blue {
  perspective: 400px;
}

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

1506494718(1).png

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

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

1506494770(1).png

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

perspective-origin: 25% 75%;

1506494932(1).png

基本功咱有了叛复，那么，還等什么扔仓，一起來(lái)練武吧褐奥。

二、練神功

首先我們實(shí)現(xiàn)靜態(tài)效果翘簇。思路：用4個(gè)div撬码，分別為ABCD。然后版保，用rotateXYZ讓ABCD轉(zhuǎn)至4個(gè)方向呜笑，然后使用translateZ或translate3d（0,0，n）將ADBC拉開(kāi)間隔找筝，否則交叉在一起蹈垢。動(dòng)態(tài)效果：ABCD依次旋轉(zhuǎn)。分4次：A占據(jù)B的位置袖裕，B占C曹抬，C占D，換4次位置為一個(gè)循環(huán)急鳄。在此谤民，貼上含A代碼，其他部分實(shí)現(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);
    }
}

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

20170630015503752.jpg