整出来的效果：
我的css代码：
.main {margin: 0 auto padding: 0 width: 60% border: 3px solid #FB3 height: 710pxposition: relative
}
.one{
height: 6em line-height: 6em
position: absolute top: 0 left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.one>div, .three>div {
-webkit-transform:rotate3d(1,0,0,-90deg) scaleZ(3)
transform:rotate3d(1,0,0,-45deg) scaleZ(3)
perspective:150px
}
.two{
position: absolute top: 3.55em left: 0
height: 6em line-height: 6em width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center bottom
transform-origin: center top
}
.two>div, .four>div {
-webkit-transform:rotate3d(1,0,0,45deg) scaleZ(3)
transform:rotate3d(1,0,0,45deg) scaleZ(3)
perspective:150px
}
.three{
height: 6em line-height: 6em
position: absolute top: 9em left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.four{
height: 6em line-height: 6em
position: absolute top: 12.5em left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.red {background-color: red float: left font-size: 4em width: 25% text-align: center}
.blue {background-color: blue float: left font-size: 4em width: 25% text-align: center}
.green {background-color: green float: left font-size: 4em width: 25% text-align: center}
.yellow {background-color: yellow float: left font-size: 4em width: 25% text-align: center}
1、one，two，three，four这几个div都是舞台，容器元素，所以不在这几个上面应用3d变化。只是设置视角什么的。
他们的子元素设置变化。
2、one，two，这些元素使用了绝对定位。使用绝对定位主要是，大家变换以后中间有空隙，为了消除空隙，使用translate3d对Y进行变换消除空隙应该是不行的，因为变化以后相邻两个图形大小不一致了。当然3D空间中两个不一样大的东西在图片上看起来一样大，应该也是可以的，不过这个就很复杂了吧，只变化Y肯定是不行的。你的不对成应该主要就是因为这个。
3、one，two，这些容器元素我设置了高度，实际上也可以不设置高度，高度主要是用来计算消除空隙的，但是消除多少（也就是每个容器的top应该设置为多少）这个我现在也不会算，图里面是试出来的。不过看你的图没有空隙，你应该有自己的计算方法吧。
试了好久，想的脑袋疼 ＝。＝！
"点积" 是把 对称的元素相乘，然后把结果加起来：
(1, 2, 3) • (7, 9, 11) = 1×7 + 2×9 + 3×11 = 58
我们把第一个元素相配（1 和 7），然后相乘。第二个元素（2 和 9） 和第三个元素（3 和 11）也一样，然后把结果加起来。
总共有6个可动的参数，这六个参数分别控制不同的变换
| a b 0 |
| c d 0 |
| tx ty 1 |
当矩阵为1的单元矩阵的时候，表明该图形没有变换
缩放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0)
平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty)
旋转：rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0)
拉伸：skew(degx, degy) 等同于 matrix(1, tan(degy), tan(degx), 1, 0, 0)
rotate(deg) === matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0)
由(x,y)旋转到(x',y ')
所以 css中的矩阵表示为：
matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0)
http://tridiv.com/
让一个物体水平和垂直运动
https://cubic-bezier.com/#.17,.67,.83,.67
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
https://www.shuxuele.com/algebra/matrix-introduction.html
https://www.shuxuele.com/algebra/matrix-multiplying.html
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
https://segmentfault.com/a/1190000009036596
