3D空间
perspective(透视)属性为子元素创建了一个3D空间，它的值定义了子元素z变换效果的强度。大的perspective 值创建小的z变换效果，小的值创建大z变换效果。
父级样式定义
.parent {
perspective: 350px;
}
消失点
perspectiveOrigin（透视-起始）定义了消失点，它的默认值是50% 50%。水平居中和垂直居中
父级样式定义
.parent {
perspective: 350px;
/* 短横线命名的属性 */
perpective-origin：50% 50%
}
3D转换
- translateX(...):水平的移动子元素
- translateY(...):垂直的移动子元素
- translateZ(...):更近或更远的移动子元素。该效果的强度由perspective(透视)属性的值决定
.parent {
perspective: 350px;
/* 短横线命名的属性 */
perpective-origin：50% 50%
}
.child {
transform: translate3d(0px, 0px, -500px)
}
3D旋转
rotate3d在x、y或z轴旋转一个元素，前面的三个参数定义了x、y和z向量。最后一个参数定义旋转角度
补充：可以理解为先确定x、y、z矢量相加后形成的轴，后在这个轴的垂直平面做旋转,千万不要理解为在每个轴上都做了一次角度旋转，角度只进行了一次
.parent {
perspective: 350px;
/* 短横线命名的属性 */
perpective-origin：50% 50%
}
.child {
transform: translate3d(0px, 0px, -500px)；
transform: rotate3d(1, 0, 0, 69deg)
}
用例：屏幕适配
当一个网页从桌面到手机设备需要一些转变，屏幕空间变得更小。当这种情况发生时，通常是将低优先级的元素从屏幕中移除（用户端）。在y轴旋转元素可以腾出更多的屏幕空间去使用。这种方案将允许包含更多的ui当遭遇网页适配到手机端时。
具体用例看官方例子
但这么做是有代价的。旋转程度越高，可读性越差。然而，我们不总是需要100%的可读性。图形设计师 David Carson曾经 设计了一个旅馆的楼层数字标识。这些标识是客户走出电梯看到的第一样东西。该设计师创建了一些由数字和单词以特殊排列方式组合的图片，他的设计不是可读的，却是易于理解的。
常见考题Screen Realestate指什么？简单说就是显示屏用于应用展示的可用空间
Screen Realestate：the amount of space available on a display for an application to provide output
用例：不同角度的透视
-想想正视图，俯视图，侧视图，这里只是换了个折中的观察角度
有些时候不同角度展示一个事物便于对它的交流。下面是我在演示中使用的网页的线框。我需要去交流说明这个线框右上角有三个元素，每一个都堆叠在另一个的上面，通过转换或旋转这个线框在一个3d空间中，我可以从第二个角度来展示。
用例及代码见官方
/* 宽高比 */
aspect-ratio: 3/1;
transform-style: preserve-3d被配置在#child元素上。这使得转换元素的子元素存在于它们自己的3d空间中。没有它，.grandchild元素将被平铺到#child元素的平面上。
如果你删除了这一行，你会看到. grandchild元素不会被转化（就是平铺）。
