“这是我参与更文挑战的第6天，活动详情查看： 更文挑战”
效果：
先来看xyz坐标轴的位置
默认状态下，坐标原点在元素中心点，即：
transform-origin: 50% 50% 0;默认值
画图是这样的：z轴垂直屏幕向外，xyz轴的方向是符合左手螺旋定律的（中学物理电磁场那块内容），大拇指指向是z轴正方向，其余四指自然握紧，从x轴正方向转向z轴正方向
大概这样：弯弯的那个指向是判断xyz是否符合左手螺旋定则时手旋转的方向
所以当我们把盒子沿着y轴旋转一点角度，坐标轴变成了这样：
x轴变成朝里面旋，z轴从垂直屏幕向外朝右边旋
图片沿y轴是这样子转的：
大概这样子
这时候，如果要盒子往前走，应该是translateZ，
此处为了效果明显，又加了一个demo的图片，并设置position，left和top为0，让两张demo在一行，要不然div会独占一行，效果出不来
（因为transform-origin的关系，右边的图片转的角度会稍微偏一点点）
所以，我们要做到照片展示的那个效果，就是让6张图片这样沿Y轴旋转，形成一个"米"字少一竖的样子，各自再往前走200px，变成像六边形一样
如果两张图片旋转的角度刚好相差180°，就会重合在一起，两张图片背靠背，沿着与本身垂直的方向移动
变成这样：
凑合记录一下思路
首先，先做出里面那个效果，每个图片间隔60deg
.wrapper {
position: relative;
height: 200px;
width: 200px;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotateX(60deg);
}
.item {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
line-height: 200px;
opacity: 0.5;
text-align: center;
color: #fff;
font-size: 30px;
}
.item:nth-child(1) {
background: royalblue;
transform: rotateY(60deg);
}
.item:nth-child(2){
background: salmon;
transform: rotateY(120deg);
}
.item:nth-child(3) {
background: slateblue;
transform: rotateY(180deg);
}
.item:nth-child(4) {
background: springgreen;
transform: rotateY(240deg);
}
.item:nth-child(5) {
background: pink;
transform: rotateY(300deg);
}
.item:nth-child(6) {
background: purple;
transform: rotateY(360deg);
}
效果：
然后每个图片朝各自前面移动200px
即每个nth-child下的transform加一个translateZ(200px);
如：
.item:nth-child(1) {
background: royalblue;
transform: rotateY(60deg) translateZ(200px);
}
看效果：
最后设置旋转动画，并调整父容器的translateX（父容器抬头的角度）
父级容器wrapper修改translateX，并调用动画：
transform: rotateX(30deg);
animation: move 10s linear infinite;
动画帧：
@keyframes move {
0% {
transform: rotateX(-20deg) rotateY(360deg);
}
100% {
transform: rotateX(-20deg) rotateY(0);
}
}
效果：下面那一排是在前面，1-2-3-4-5-6这样的顺序转：
上面这个旋转是先沿X轴转，再沿y轴转：
如果把rotateY放在rotateX前面，就会先转y，再转x，效果就不一样了：
随着盒子沿y轴旋转，x轴和z轴的方向不停在变，所以呈现出来的效果就是方向不定一直变
