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

3D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HnQvDH1P-1583129896769)(C:\Users\dell\Desktop\我的博客\QQ截图20200302140839.png)]$

content3 {
transform:rotateX(45deg);
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmQaUtjJ-1583129896770)(C:\Users\dell\Desktop\我的博客\QQ截图20200302140948.png)]$

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

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

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

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bkh8cN28-1583129896772)(C:\Users\dell\Desktop\我的博客\图片1.png)]$

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

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，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容

见资源

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.