A：我今天照了张照片做了桌面背景感觉还不错。
B：一张照片当桌面背景算什么，我的桌面背景是来回切换的。
C：切，2D还好意思拿出来说，俺的3D轮播照片都快用腻了，俺想着要不去外星球体验一下超高维空间。

啥？3D？高维？我的天哪，求A得心里阴影面积。

图片.png

小A，小B童靴，先别着急，今天就让你搭上3D的列车，看到这个3D的轮播，是不是有点心动了。跟紧我，我要启程了，啊哈哈哈。

20170927_110923.gif

在3D神功练之前，咱们先来扎一下马步。要练神功，必先**，啊哈哈，不要紧张，开玩笑。

一、扎马步

马步0之transform-style

transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。

马步1之rotateXYZ

3d_axes.png

rotate旋转的意思，rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴。 您也可以理解为，物体让X或Y或Z轴旋转，旋转完后，重建它的三维坐标（坐标和物体的相对位置不变）例如，您站着的时候重心在您的肚子上，当您绕x转90，躺下后重心还在您的肚子上，此时的重心非彼时的重心，但是很您的相对位置没有发生变化，在此仅为例子说，还望懂物理的大咖科普一下。
rotateX(Ndeg) N为正，顺时针旋转，反之逆时针旋转。上图理解
rotateX

1506484938(1).png

rotateY

1506484966(1).png

rotateZ

1506484985(1).png

马步2之translateZ

translateZ( tz )，如果，原始图像（tz=0）正对你，那么tz的值越大，离你就越近，反之越远。tz>0,图像向屏幕走来，并且图像很大，tz<0图像远离屏幕，图像变小。

1506485492(1).png

马步3之Perspective

perspective ，是透视，视角。

toushi.png

css3所用的透视点在浏览器前方，可以理解为我们的眼睛为视点。
在次引用一下大张老师的解释

一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

3d-distance.jpg

那么，如果perspective：2000px，translateZ:2100px，那么，该图像将会越过您的眼睛100px，自然您也看不见这幅图像了，有谁能看见脑后的东西呢。

perspective有两种书写方式
perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例
第一种：整体透视（理解为有一个透视点，透视整个父元素，子元素配合父元素）

#blue {
  perspective: 400px;
}

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

1506494718(1).png

第二种（每一个子元素都有一个透视点）

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

1506494770(1).png

另外，透视点的默认位置在中间perspective-origin: 50% 50%;，我们可以对透视点作出调整。

perspective-origin: 25% 75%;

1506494932(1).png

基本功咱有了，那么，还等什么，一起来练武吧。

二、练神功

首先我们实现静态效果。思路：用4个div，分别为ABCD。然后，用rotateXYZ让ABCD转至4个方向，然后使用translateZ或translate3d（0,0，n）将ADBC拉开间隔，否则交叉在一起。动态效果：ABCD依次旋转。分4次：A占据B的位置，B占C，C占D，换4次位置为一个循环。在此，贴上含A代码，其他部分实现原理相同。您也可以移驾全部代码.

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

神功练好了，但是千万不要骄傲哦，习武之人，怎能满足当下一种功夫。

20170630015503752.jpg

欢迎各位朋友批评指正，多多交流。
参考资料：1、鑫空间鑫生活2、 http://desandro.github.io/3dtransforms/docs/introduction.html

3D来袭，灵动你我（css3 3D动画）