目录
CSS3-3D技术白平衡
生活中的 3D 与 2D 不同
1.近大距离小白平衡
程序中实现的方法是透视元素与视线的距离（物体与耳朵的距离越小，疗效越显着）
视角：1200px； （在父元素中使用）
变换：透视（1200px）（在子元素中使用）
两者设置会发生冲突。 建议只设置父元素。 一般数值在900-1200之间
如果你的视线距离物体足够远，基本上不会有近大远小的感觉。
视角原点
观察 3d 元素的（位置）角度
视角原点：中心center（中心）
透视图原点：lefttop（左上角）
透视原点：1000%（右下角）
3D
屏幕上具有水平和垂直交叉线 x 轴和 y 轴的 2d 场景
3D 场景在某种程度上垂直于屏幕，相对于 3D 具有额外的 z 轴
Z轴：靠近屏幕的方向为正，远离屏幕的方向为反
实现3D场景
变换样式属性
Transform-Style 属性是 3D 空间的一个重要属性，指定嵌套元素在 3D 空间中的呈现方式。 他主要有两个属性值：flat和preserve-3d
flat值是默认值，表示所有子元素都呈现在2D平面上。 keep-3d 表示所有子元素都在 3D 空间中渲染。
也就是说，如果某个元素的transform-style的值设置为flat，则该元素的所有子元素都会被展平到该元素的2D平面上进行展示。 沿 X 或 Y 轴旋转元素将导致正 Z 位置或负 Z 位置的子元素出现在元素的平面上，而不是后面或旁边。 如果某个元素的transform-style的值设置为preserve-3d，则表示不进行展平操作，并且其所有子元素都位于3D空间中。
3D位移
CSS3中的3D位移主要包括两个功能函数，translateZ()和translate3d()；
平移Z(t)3D旋转
CSS3中的3D旋转主要包括四个功能函数：rotateX()、rotateY()、rotateZ()和rotate3d()；
rotateY(a)rotateZ(a)rotate3d(x,y,z,a)（建议值0或1）3D缩放
3D缩放：CSS3中的3D缩放主要包括两个功能函数，scaleZ()和scale3d()；
简介：CSS33D变体中的缩放主要有两个函数css3立体旋转，scaleZ()和scale3d()。 当scale3d()中X轴和Y轴均为1，即scale3d(1,1,sz)时，其效果相当于scaleZ(sz)。 通过使用3D缩放功能，可以将元素在Z轴上按比例缩放。默认值为1。当该值小于1时，元素将被放大； 否则，当值大于1且小于0.01时，元素将被减少
比例Z(s)
注意：scaleZ()和scale3d()函数单独使用时没有疗效css3立体旋转，需要与其他变体函数一起使用才有疗效
3D 案例六面体
使用 CSS3 简单实现 3D 六面体（两种形式）
3D旋转和公转
