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 第三个模糊距离。

filter语法与属性

1、filter:brightness(亮度);支持百分比值(默认100%)，支持数值，
    不支持负值。
2、filter:contrast(对比度);支持百分比值(默认100%)，支持数值，
    不支持负值。
3、filter: blur(模糊程度);只支持像素值，相当于马赛克。
4、filter: saturate(饱和度);支持百分比值(默认100%)，支持数值。
5、filter: sepia(褐色色阶);支持百分比值。