1.7 3D 转换
transform 属性控制 3D 转换；（同 2D）
还有待挖掘；
视点设置
<style>
div {
transform-style: preserve-3d;
perspective: 400px;
transform-origin:50% 50% 0;
perspective-origin: 50% 50%;
backface-visibility:hidden;
margin: 0;
}
</style>
- transform-style 内容元素是否保持 3 d 效果
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。
- transform-origin 旋转元素中心点
对应 x y z
默认 50% 50% 0
- perspective 视角点高度
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。（2D）
- perspective-origin 视角点位置
x y
默认 50% 50%
- backface-visibility 背面是否可见
visible 背面是可见的。
hidden 背面是不可见的。
translate3d 平移
<p id="translate3d" class="transform" style="transform: translate3d(10px,20px,30px);">123</p>
<p id="" class="transform" style="transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 10,20,30,1)">123</p>
scale 缩放
<p id="scale3d" class="transform" style="transform: scale3d(0.5,1.5, 2)">123</p>
<p id="" class="transform" style="transform: matrix3d(2,0,0,0, 0,0.5,0,0, 0,0,2,0, 0,0,0,1)">123</p>
rotate3d 旋转
<!--单一旋转-->
<p class="transform" style="transform: rotateX(60deg)">123</p>
<p class="transform" style="transform: rotateY(-60deg)">123</p>
<p class="transform" style="transform: rotateZ(120deg)">123</p>
<p class="transform" style="transform: matrix3d(1,0,0,0, 0,0.5,0.866,0,0, -0.866,0.5,0, 0,0,0,1)">123</p>
<p id="" class="transform" style="transform: matrix3d(0.5,0,0.866,0, 0,1,0,0, -0.866,0,0.5,0, 0,0,0,1)">123</p>
<p id="" class="transform" style="transform: matrix3d(-0.5,0.866,0,0, -0.866,-0.5,0,0, 0,0,2,0, 0,0,0,1)">123</p>
<!--复合旋转-->
<p id="rotate3d" class="transform" style="transform: rotate3d(0.5,-0.5, 2, 60deg)">123</p>
<!--实在是复现不来-->
注：
复合变化的，要按顺序计算；不同顺序可能不同效果；（矩阵乘法的关系）
matrix3d 变换
matrix3d(a1,b1,c1,d1, a2,b2,c2,d2, a3,b3,c3,d3, a4,b4,c4,d4)
矩阵：
a1,b1,c1,d1
a2,b2,c2,d2
a3,b3,c3,d3
a4,b4,c4,d4
矩阵相乘 =》
x' = a1 * x + b1 * y + c1 * z + d1;
y' = a2 * x + b2 * y + c2 * z + d2;
z' = a3 * x + b3 * y + c3 * z + d3;
h' = a4 * x + b4 * y + c4 * z + d4;
因为 z 轴需要做 3D 投影至 2D 平面展示，并没有 2D 转换那么好搞啊；
直接计算齐次什么的算不下去啦；
简单 demo
<style>
div {
transform-style: preserve-3d;
perspective: 400px;
transform-origin:50% 50% 0;
perspective-origin: 50% 50%;
backface-visibility:hidden;
margin: 0;
}
p {
width: 120px;
height: 100px;
margin: 50px 100px;
}
.orginal {
background: rgba(0,255,0,0.2);
}
.transform {
background: rgba(255,0,0,0.2);
}
</style>
<body>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<div style="position: absolute;top: 0;">
<p class="orginal" style="position:absolute;top: 0px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 150px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 300px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 450px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 600px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 750px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 900px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1050px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1200px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1350px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1500px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1650px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1800px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 1950px;z-index: -1">123</p>
<p class="orginal" style="position:absolute;top: 2100px;z-index: -1">123</p>
</div>
<div id="div">
<p class="transform" style="">123</p>
</div>
<!--平移-->
<div>
<p id="translate3d" class="transform" style="transform: translate3d(10px,20px,30px);">123</p>
</div>
<div>
<p class="transform" style="transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 10,20,30,1)">123</p>
</div>
<!--缩放-->
<div>
<p id="scale3d" class="transform" style="transform: scale3d(2, 0.5, 2)">123</p>
</div>
<div>
<p class="transform" style="transform: matrix3d(2,0,0,0, 0,0.5,0,0, 0,0,2,0, 0,0,0,1)">123</p>
</div>
<!--旋转-->
<div>
<p id="rotate3d" class="transform" style="transform: rotate3d(1, -0.5, 2, 60deg)">123</p>
</div>
<div>
<p id="rotate3d" class="transform" style="transform: rotate3d(1, -1, 2, 60deg)">123</p>
</div>
<div>
<p class="transform" style="transform: rotateZ(120deg) rotateY(-30deg) rotateX(60deg) ">123</p>
</div>
<div>
<p class="transform" style="transform: rotateX(60deg) rotateY(-30deg) rotateZ(120deg) ">123</p>
</div>
<!--旋转 x-->
<div>
<p class="transform" style="transform: rotateX(60deg)">123</p>
</div>
<div>
<p class="transform" style="transform: matrix3d(1,0,0,0, 0,0.5,0.866,0,0, -0.866,0.5,0, 0,0,0,1)">123</p>
</div>
<!--旋转 y-->
<div>
<p class="transform" style="transform: rotateY(-60deg)">123</p>
</div>
<div>
<p class="transform" style="transform: matrix3d(0.5,0,0.866,0, 0,1,0,0, -0.866,0,0.5,0, 0,0,0,1)">123</p>
</div>
<!--旋转 z-->
<div>
<p class="transform" style="transform: rotateZ(120deg)">123</p>
</div>
<div>
<p class="transform" style="transform: matrix3d(-0.5,0.866,0,0, -0.866,-0.5,0,0, 0,0,2,0, 0,0,0,1)">123</p>
</div>