3D动画、阴影，滤镜
**3D动画原理：**在平面内建立一个三维座标系，水平向右x正轴，垂直向下y正轴，由平面指向用户的轴称为z轴；
3D动画必备：
1.perspective:1000px;通过给座标系添加perspective样式即可增加z轴；
2.z轴的位置可以用perspective样式来设置
默认位置perspective-origin:50% 50%;(元素的中心位置)
例：0% 0%则是x轴y轴的交点处；与变化原点类似；
3.物体沿z轴移动符合透视法则，物体z轴长度越小用户在视觉上看到的物体越大；
4.要实现3D效果的元素必须拥有一个父元素，其子元素才会获得透视效果，实现3d视觉效果关键点是将实现3d效果元素的父元素进行旋转(即绕x轴y轴旋转)；
5.当x为正值时向上旋转，y为正值时向右旋转；
元素通过水平中线和垂直中线的交点确定，在计算中线时元素的margin值也计算在内；
6.父元素中必加两个属性：
transform-style:preserve-3d;
perspective:1000px;
元素原点的确定
1.使用绝对定位样式移动元素时，此时座标系的x轴和y轴以设置里相对定位的祖先元素的中点为原点
2.使用transform的位移样式或是相对定位样式移动元素时，此时座标系的x轴和y轴以元素的中心为原点
3.默认情况下，座标系的z轴位于父元素的水平中线与垂直中线的的交界处；
3D切割轮播图的实现：
原理：就是将四张图片分别放在多个正方体的四个面上，在每一个正方体的相同的一个面上定位遇上一个盒子连续的图片，这样就能实现多个盒子的四个面排列起来后成为连续的图片，最后给每个盒子加上动画效果(盒子之间要有延时)，这样就能在视觉上表现出轮播效果。
盒阴影
**原理：**通过box-shadow属性给元素加一个阴影(初始值与元素大小相同)；
默认值：box-shadow:none;
复合写法：box-shadow:10px 15px 20px 25px yellow inset/outset;
第一个值是阴影的水平距离移动(默认向右移动)—xOffset
第二个值是阴影的垂直距离移动(默认向下移动)–yOffset
第三个值是阴影的模糊距离(作用就是增强阴影边框的模糊感)—burlLenght
第四个值可以缩放阴影的大小—spread;
第五个值是阴影的颜色设置，默认情况下它的颜色是黑色—color
第六个值是阴影表示模糊感的方向是向内还是向外，在不设置的情况下默认是向外(outset)—outset;
文字阴影
正常文字设置阴影：
text-shadow:none(默认值)；
text-shadow:10px 10px 5px black;同盒阴影的属性相同；
凹凸文字：
凸文字形成原理：同一文字设置两组阴影,但两组阴影颜色不同(右下阴影颜色为暗色，左上颜色为亮色)
例：text-shadow:1px 1px 3px black, -1px -1px 3px white;
凹文字形成原理：两组阴影，(右下颜色亮色，左上颜色为暗色)
例：text-shadow:1px 1px 3px white,-1px -1px 3px black;
滤镜样式：
filter：滤镜属性，默认值为none;
一下是filter的样式
blur(px):高斯模糊，值越大越模糊；
brightness(%):亮度，默认值是100%，0%会全黑，大于100%会越来越亮；
contrast(%)：对比度，默认值是100%，0%会全灰。大于100%对比度越来越强
drop-shadow(h-shadow v-shadow blur spread color):图片阴影；filter:drop-shadow(2px 5px 5p);
grayscale(%):灰度，默认值0%，100%会全灰；
hue-rotate(deg):色相旋转，0deg默认值，没有最大值，超过360deg,相当于绕一圈
invert(%):反转输入图像，0%默认值，100%完全反转
opacity(%):透明度，100%默认值，0%完全透明，与opacity很像，不同之处在于通过filter，一些浏览器会提供硬件加速；
saturate(%)：饱和度，100%默认值，0%完全不饱和，超过100%，有更高的饱和度；
sepia(%):深褐色，0%默认值，100%完全深褐色；
滤镜的使用，顺序决定结果；