3D样解析

3D 样式详解

一、什么是 3D？

1、3D 是我们人眼所能看到的立体空间，但是电脑上的 3D 并不是真
正的立体空间，而是通过电脑渲染出来的立体空间，绘画领域，透视法则，近大远小 (景深)"perspective"，在浏览器中是以 Z 轴呈现
出来的。

二、3D 的使用的方法

1、首先给父级定义一个可视距离 (景深)"perspective:1000px" 眼睛
看电脑的距离，然后还需要给父级划定一个 3D 区域 "transform-
style:preserve-3d" 专门给父级划定 3D 区域，且孙子以下元素没有效
果，需要重新设置属性 (同上景深); 当定义子元素 Z 轴位置以后，父级可
以关闭 perspective(景深)，给子元素添加景深，这样做的目的是可以
更好的观看 3D 效果。

三、transform 中 Z 轴注意事项

1、Z 轴可以通过 rotate(旋转) 改变方向，且正值永远在旋转后正面      的那一方，负值永远在旋转后的后面。

四、transform 中的属性默认方式

1、transform 中的属性如果没有指定轴 X Y Z 轴的话默认是 Z 轴变化。

box-shadow 样式

一、box-shadow 数值与语法

1、语法：box-shadow:0 0 0 0 color 阴影显示方式;
2、x y 模糊距离 模糊大小 颜色 (接受负值) 阴影显示方式默认是
像外扩赛 "outset" 内阴影 "inset"
3、阴影可以接受多个值，可以结合伪元素使用。只写三个值的时
候，前两个 X Y 第三个模糊距离。