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