17.3D动画以及盒阴影盒滤镜

3D动画以及盒阴影盒滤镜

3D

content3 {
transform:rotateX(45deg);
}

通过给坐标系添加perspective样式即可增加Z轴

默认情况下， 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处

z轴的位置可以用perspective-origin样式来设置

默认位置为perspective-origin:50% 50%;
与变化原点类似

盒阴影

box-shadow：xOffset yOffset burlLehgth spread color outset;
盒阴影:水平方向偏移 垂直方向偏移 阴影模糊距离 阴影缩放 阴影颜色 阴影显示方式；

看似没有任何效果，原因其实很简单，因为此时影子的大小与元素一致，而且没有给影子设置偏移，那么以用户的从上往下看的视角来看，元素的影子全部都被元素本身给遮挡住了

box-shadow：0px 0px 0 0 blue outset;
盒阴影:水平方向不偏移 垂直方向不偏移 阴影模糊距离为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影

box-shadow:100px 100px 0 0 blue outset;
盒阴影:水平方向向右偏移100px 垂直方向向下偏移100px 阴影模糊距离为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影

缩放：

color:盒阴影的颜色
这个值最好理解，就是影子的颜色，此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等，作用就是改变影子的颜色

inset:盒阴影的显示方式
gb、rgba、十六进制等，作用就是改变影子的颜色

inset:盒阴影的显示方式
默认情况下值为outset，影子在元素的下面，就如同一开始介绍的盒阴影模型一般，但是如果给盒阴影加上inset，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容

滤镜

见资源