四、CSS效果
一、box-shadow
box-shadow:在元素的框架上添加阴影效果
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow:
3px 3px red,
-1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
参考：box-shadow - CSS：层叠样式表 | MDN
课程示例：
未加box-shadow效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:200px;height:200px;margin: 100px;/* box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); *//* box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); *//* box-shadow: 0 0 0 5px green; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>
box-shadow基本用法：
/* box-shadow: x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 阴影扩散半径 阴影颜色; */
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); //这里加了个浅灰色的半透明阴影
如果阴影不明显的话，透明系数可以调到0.5。
增加阴影扩散区域10px
加了阴影扩散区域10px,阴影区域明显比之前大了一些。
/* box-shadow: (阴影向内) x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 阴影扩散半径 阴影颜色; */
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);
/* box-shadow: x轴(水平)偏移 y轴(垂直)偏移 模糊区域半径 扩散半径 阴影颜色; */
box-shadow: 0 0 0 5px green; /*这里只给了5px的扩散*/
当扩张区域为负值，会是什么效果？
首先，为了效果明显，我们加大数值
box-shadow: 100px 100px 0 5px green;
扩展区域调为负值，调整为-20px
box-shadow: 100px 100px 0 -20px green;
调整为-50px
box-shadow: 100px 100px 0 -50px green;
可以看到，扩展半径调整为负值，随着负值越来越大，扩展大小越来越小。
box-shadow高级用法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:10px;height:10px;margin: 10px;border-radius: 5px;box-shadow: 200px 200px 0 5px green,230px 200px 0 5px green,215px 215px 0 -3px red;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
这里设置border-radius: 5px;,而width:10px、height:10px，导致看起来就是个圆形，设置为border-radius: 5px，阴影也会变成圆形。
为什么写这个例子呢，就是我们需要知道，可以通过这个投影可以做许多的效果。
再看一个利用投影做出来的效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{position: relative;width: 36px;height: 36px;border-radius: 50%;margin: 300px auto;background-color: #C63D01;box-shadow: 0px 0px 0 1px #000,-20px -26px 0 -10px #333333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333333,34px -40px 0 15px #fff,34px -40px 0 16px,0px 55px 0 75px #fff,0px 55px 0 76px #000,0 22px 0 120px #08BDEB,0 22px 0 121px #000;}/*叮当猫的鼻子*/.container::before{content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background-color: #000;}/*叮当猫的嘴巴*/.container::after{content: '';position: absolute;bottom: -83px;left: -44px;width: 125px;height: 70px;border-bottom-right-radius: 28px;border-bottom: solid 2px black;border-bottom-left-radius: 28px;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
具体实现步骤：
第一步：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{position: relative;width: 36px;height: 36px;border-radius: 50%;margin: 300px auto;background-color: #C63D01;/* box-shadow: 0px 0px 0 1px #000,-20px -26px 0 -10px #333333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333333,34px -40px 0 15px #fff,34px -40px 0 16px,0px 55px 0 75px #fff,0px 55px 0 76px #000,0 22px 0 120px #08BDEB,0 22px 0 121px #000; */}/*叮当猫的鼻子*//* .container::before{content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background-color: #000;} *//*叮当猫的嘴巴*//* .container::after{content: '';position: absolute;bottom: -83px;left: -44px;width: 125px;height: 70px;border-bottom-right-radius: 28px;border-bottom: solid 2px black;border-bottom-left-radius: 28px;} */</style>
</head>
<body><div class="container"></div>
</body>
</html>
放开box-shadow
大白话：
1.营造层次感（立体感）- 可以通过向内或向外扩散阴影实现；
2.充当没有宽度的边框 - 当你的排版不能有边框，而又想要边框效果，就可以使用box-shadow扩散边框效果；
3.特殊效果 - 比如想画某种图案，可以通过box-shadow实现。
二、text-shadow_x264:文字阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:0 auto;max-width: 800px;font-size: 18px;line-height: 2em;font-family: STKaiti;/* text-shadow: 1px 1px 0 #aaa; *//* text-shadow: 0 0 1px rgba(128,128,128,.2); *//* background: black; *//* text-shadow: -1px -1px 0 white,-1px 1px 0 white,1px -1px 0 white,1px 1px 0 white; *//* text-shadow: 0 0 2px white; */}.container p{text-indent: 2em;}</style>
</head>
<body><div class="container"><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p></div>
</body>
</html>
增加text-shadow
text-shadow: 1px 1px 0 #aaa;
现在看起来，更有立体感了。
text-shadow: 0 0 1px rgba(128,128,128,.2);未使用前：
使用后：
加上模糊，看起来颜色变深了，区别不是那么明显(PC上效果不明显，移动端上效果明显)，这就是所说的印刷品质感，就是当油墨印刷到纸上，有部分油墨渗透进纸张内，造成字体模糊的感觉。
当在复杂的页面，字体不太明显时，可以看下下面效果：
三、border-radius:圆角
课程示例：
未修改前的效果:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 100px;height: 100px;background: red;/* border: 10px solid green; *//* border-radius: 10px; *//* border-radius: 50%; *//*border: 50px solid green;border-top-left-radius: 100px 50px;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;*/border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
容器的当前宽和高分别为100px,当加上
border-radius: 50%;当没有边框的时候，容器变成了圆形
现在，我们加上边框
border: 10px solid green;
边框也变成了圆形。
这是，设置border-radius:50px
border-radius:50px
发现，里边的就是圆形的，但是外边的边框就不那么圆了。这是因为，边框还有10px,所有我们将border-redius:60px,再看效果：
border-radius:60px
发现边框终于变圆了，要注意这点差异，所以，我们一般使用的时候，直接写50%就好了。
除了使用border-radius，我们还可以使用更详细的样式：
border: 50px solid green;
border-top-left-radius: 100px 50px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
如果去掉border,会怎么样呢？
border-radius除了支持圆形以外，还支持更多的写法。
两个半径不一样效果：
border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;
绿框内，容器的四个角不再是圆形了，有点想椭圆的形状。
同样，也可以拆开写四个角：
border: 50px solid green;border-top-left-radius: 100px 50px;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;
如果将边框为成0，效果怎么样？
修改边框4个角
这样，我们控制4个角的值，做出各种奇怪的图案。
之前哆啦A梦的两个胡须就可以通过控制下面2个角的角度做起来
四、background:背景
雪碧图动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{}.i{width: 20px;height: 20px;background: url(./background.png) no-repeat;background-size: 20px 40px;transition: background-position .4s;}.i:hover{background-position: 0 -20px;}</style>
</head>
<body><div class="container"><div class="i"></div></div>
</body>
</html>
background-position:指定背景图像在元素中出现的位置
transition:动画过渡效果
参考：https://juejin.cn/post/7328621062727745536#%E4%B8%80%EF%BC%9Atransition%20%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C
课程示例2：
panda.jpg
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);/* background-size: contain; *//* background-repeat: no-repeat; *//* background-position: center center; *//* background-size: cover; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>
通过上面页面，可以看到图片是比容器大的，所以只能显示一部分图片区域。
想让背景图居中，看下面代码：
background-position: center center;
对比上面的页面，可以看到图片是横向居中，垂直居中的,但是还是没有显示全，耳朵部分没有显示全。
修改下代码：
background-position: center top;
设置背景图的大小
background-size: 200px 100px;
background-size: 50% 50%;
background-size: cover; /*覆盖整个画面，同时保持长宽比不变*/
background-size: contain; /*多余的地方空白出来，同时保持长宽比不变*/先看下background-size: cover效果：
看下background-size:contain效果：
设置背景图铺排方式：
background-repeat: no-repeat - 背景图像不平铺;
background-repeat: repeat-x - 背景图像在横向上平铺;
background-repeat: repeat-y - 背景图像在纵向上平铺;
background-repeat: repeat - 背景图像在横向和纵向平铺;
background-repeat: round - 当背景图像不能以整数次平铺时，会根据情况缩放图像;
background-repeat: space - 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围;
五、clip-path: 按路径裁剪
按容器进行裁剪 - 可以指定显示容器的一部分显示，另一部分被裁剪掉
未裁剪之前的效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: inset(100px 50px); *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); *//* clip-path: url(#clipPath); *//* background-size: cover; *//* transition:clip-path .4s; */}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> --><polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon></clipPath></defs></svg>
</body>
</html>
开始裁剪:
clip-path: inset(100px 50px);clip-path详解：CSS中 clip-path 的用法总结clip-path 基本介绍 clip-path 是一个CSS属性，剪切路径，允 - 掘金
解释：
clip-path: inset(100px, 50px)
inser - 按矩形裁剪，宽100px,高50px
按圆形裁剪
clip-path: circle(50px at 100px 100px);
在裁剪圆形的基础上，加入过渡效果
.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 */clip-path: circle(50px at 100px 100px);/* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); *//* clip-path: url(#clipPath); *//* background-size: cover; */transition:clip-path .4s;}.container:hover{clip-path: circle(80px at 100px 100px);}
鼠标放上去之前
鼠标放上去触发过渡效果
按多边形裁剪
clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);
按路径裁剪，可以借助矢量图形svg
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);*//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */clip-path: url(#clipPath);/* background-size: cover; */transition:clip-path .4s;}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- r50为半径，cx,cy为圆心坐标的一个圆 --><circle cx="60" cy="60" r="50" fill="#34538b" /><!-- <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon> --></clipPath></defs></svg>
</body>
</html>
使用矢量图形svg，实现之前的多边形裁剪
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: 按矩形裁剪(宽100px 高50px); *//* clip-path: inset(100px 50px); *//* clip-path: 按圆形裁剪(在水平100px垂直50px的地方裁剪半径50px的圆形); 跟border-radius的圆形区别：1.border-radius改变容器的大小形状，clip-path容器的占位没有改变，还是原来的形状2.clip-path因为不改变容器内的定位，所以有的时候做一些容器内的定位就很好做 *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(第一个重要的点(x,y), 第二个重要的点(x,y), ..., 第N个重要的点(x,y)) - 按多边形裁剪; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);*//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */clip-path: url(#clipPath);/* background-size: cover; */transition:clip-path .4s;}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- r50为半径，cx,cy为圆心坐标的一个圆 --><!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> --><!-- 点坐标为points的多边形 /> --><polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon></clipPath></defs></svg>
</body>
</html>
注意：clip-path功能很强大，基本上什么形状都可以做出来，但是需要注意，有些时候浏览器的兼容性不是那么好。
六、3D-transform: 在3D空间中进行变换
translate: 位移
scale: 缩放
skew: 斜切
rotate: 旋转
课程示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 500px; *//* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;}#cube div{width: 200px;height:200px;position: absolute;line-height: 200px;font-size:50px;text-align: center;}#cube:hover{/* transform: translateZ(-100px) rotateX(270deg); *//* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}.front{/* transform: translateZ(100px); *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}.back{/* transform: translateZ(-100px); *//* transform: translateZ(-100px) rotateY(180deg);background:rgba(0,255,0,.3); */}.left{/* transform: translateX(-100px) rotateY(-90deg);background:rgba(0,0,255,.3); */}.right{/* transform: translateX(100px) rotateY(90deg);background:rgba(255,255,0,.3); */}.top{/* transform: translateY(-100px) rotateX(-90deg);background:rgba(255,0,255,.3); */}.bottom{/* transform: translateY(100px) rotateX(90deg);background:rgba(0,255,255,.3); */}</style>
</head>
<body><div class="container"><div id="cube"><div class="front">1</div><!-- <div class="back">2</div><div class="right">3</div><div class="left">4</div><div class="top">5</div><div class="bottom">6</div> --></div></div>
</body>
</html>
进行2D变换：
transform: 设置对象转换
.front{/* transform: translateZ(100px); *//* 指定对象X轴（水平方向）的平移 */transform: translateX(100px);/* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}
往右100px,往下10px,旋转25度
.front{/* transform: translateZ(100px); *//*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*/transform: translateX(100px) translateY(10px) rotate(25deg);/* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}
我们改变下属性顺序看下，会是什么结果！
.front{/* transform: translateZ(100px); *//*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); */transform: rotate(25deg) translateX(100px) translateY(10px);background:rgba(255,0,0,.3);}
发现图案不一样了，所以变换，如果改变属性顺序，会造成图案不一样！！！
造成变换图案不一样的原因是，CSS是根据你的顺序逐个解析执行属性的，按照数学的矩阵运算最终计算图案的位置以及形状。
理解3D变换： x轴 - 水平，y轴 - 垂直， z轴 - 面向我们是正轴，屏幕往里是负轴。
front面是正面，理论上我们应该让它面向我们100px。
.front{transform: translateZ(100px);/*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}
我们发现，设置了z轴为什么看起来好像没有变化呢？
实际上，因为电脑屏幕是平面的，所以z轴就涉及到视觉原理近大远小，当没有透视关系对比的时候，我们是看不出视觉差的，我们设置的是z轴+100px,所以从视觉原理来说，就是保持x轴、y轴形成的图案效果。
现在，我们设置perspective：透视属性、 transform-style：定义子元素所在空间维度
.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 透视属性，z轴透视的距离; */perspective: 500px;/* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;}
通过对比效果看，在还是原来宽高的情况下，为体现透视的近大远小视觉效果，正面图案变大了，视觉上感觉离得更近了。
perspective:设置透视属性
transform-style:设置透视效果
修改translateZ，当我们将z轴设置为0px
translateZ:0px,相当于没有面向我们，也没有向屏幕里， 从视觉上看，还是原来图案大小。
继续修改，当我们将z轴设置为-100px
translateZ:-200px， 图案变小了，从视觉上看，向屏幕里凹进去了。
为了更明细一些，我们把背后的那个面(back)放出来，做对比:
现在，将其他面放开：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;/* perspective: 透视属性，z轴透视的距离; */perspective: 500px;/* transform-style: preserve-3d; *//* transform: translateZ(-100px); *//* transition:transform .4s; */}.container{/* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;}#cube div{width: 200px;height:200px;position: absolute;line-height: 200px;font-size:50px;text-align: center;}#cube:hover{/* transform: translateZ(-100px) rotateX(270deg); *//* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */}.front{transform: translateZ(100px);/*指定对象X轴（水平方向）的平移 *//* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); translateX： 往右100pxtranslateY： 往下10pxrotate： 旋转25度最重要一点： 变换不可以改变这几个属性顺序，如果改变就会图案不一样！！！*//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}.back{/* transform: translateZ(-100px); z轴向屏幕里100px*//* transform: translateZ(-100px); *//* transform: translateZ(-100px) rotateY(180deg); z轴向屏幕里100px, y轴旋转180度*/transform: translateZ(-100px) rotateY(180deg);background:rgba(0,255,0,.3); }.left{transform: translateX(-100px) rotateY(-90deg);background:rgba(0,0,255,.3);}.right{transform: translateX(100px) rotateY(90deg);background:rgba(255,255,0,.3);}.top{transform: translateY(-100px) rotateX(-90deg);background:rgba(255,0,255,.3);}.bottom{transform: translateY(100px) rotateX(90deg);background:rgba(0,255,255,.3);}</style>
</head>
<body><div class="container"><div id="cube"><div class="front">1</div><div class="back">2</div><div class="right">3</div><div class="left">4</div><div class="top">5</div><div class="bottom">6</div></div></div>
</body>
</html>
现在立方体的效果已经出来了，但是因为设置透视属性的原因，立方体的视觉效果，已经超出了最一开始设置的红框的容器大小，现在我们将立方体整体变小。
#cube{width:200px;height:200px;/* transform-style: 指定子元素透视的平面; preserve-3d： 指定子元素定位在三维空间内 ；flat： 指定子元素位于此元素所在平面内*/transform-style: preserve-3d;transform: translateZ(-100px);}
现在，立方体已经没有超出容器了。
加上动画过渡效果：
注意：
限制：3D变换性能并不是非常好，在低端机器上很容易出现卡顿。
七、面试题
相关文章：
四、CSS效果
一、box-shadow box-shadow:在元素的框架上添加阴影效果 /* x 偏移量 | y 偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半…...
全面评测 DOCA 开发环境下的 DPU：性能表现、机器学习与金融高频交易下的计算能力分析
本文介绍了我在 DOCA 开发环境下对 DPU 进行测评和计算能力测试的一些真实体验和记录。在测评过程中，我主要关注了 DPU 在高并发数据传输和深度学习场景下的表现，以及基本的系统性能指标，包括 CPU 计算、内存带宽、多线程/多进程能力和 I/O 性…...
图论 八字码
我们可能惊异于某些技巧。我们认为这个技巧真是巧妙啊。或者有人认为我依靠自己的直觉想出了这个表示方法。非常自豪。我认为假设是很小的时候，比如说小学初中，还是不错的。到高中大学，就有一些不成熟了。因为这实际上是一个竞技。很多东西前…...
OSI5GWIFI自组网协议层次对比
目录 5G网络5G与其他协议栈各层映射 5G网络 物理层 (PHY) 是 5G 基站协议架构的最底层，负责将数字数据转换为适合无线传输的信号，并将接收到的无线信号转换为数字数据。实现数据的编码、调制、多天线处理、资源映射等操作。涉及使用新的频段（…...
北理新源监控平台都管理哪些数据
北理新源信息科技有限公司（简称“北理新源”）依托北京理工大学电动车辆国家工程研究中心，建设和运营了“新能源汽车国家监测与管理平台”。该平台是国家级的新能源汽车数据监管平台，主要负责对新能源汽车的运行数据进行采集、监测…...
WPS不登录无法使用基本功能的解决方案
前言 WPS不登录无法使用基本功能的原因通常是为了同步数据、提供更多高级功能或满足软件授权要求。然而，一些用户可能出于隐私或便捷性的考虑，不愿意登录账号。在这种情况下，WPS可能会限制未登录用户的使用权限，导致工具栏变灰…...
车载软件架构 --- CP和AP作为中央计算平台的软件架构双核心
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活…...
【技巧】优雅的使用 pnpm+Monorepo 单体仓库构建一个高效、灵活的多项目架构
单体仓库（Monorepo）搭建指南：从零开始 单体仓库（Monorepo）是一种将多个相关项目集中管理在一个仓库中的开发模式。它可以帮助开发者共享代码、统一配置，并简化依赖管理。本文将通过实际代码示例࿰…...
【深度学习基础】多层感知机 | 权重衰减
【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…...
修改word的作者 最后一次保存者 总编辑时间 创建时间 最后一次保存的日期
作者： 1.打开word文件 2.点击左上角的文件 3.选项 4.用户信息 5.将用户信息中的 姓名改为你需要的名字 最后一次保存者 1.word重命名为.zip文件 2.docProps中有个core.xml 3.用记事本打开有个lastModifiedBy标签，将里面内容改为你需要的名字 总编辑时…...
青少年编程与数学 02-007 PostgreSQL数据库应用 15课题、备份与还原
青少年编程与数学 02-007 PostgreSQL数据库应用 15课题、备份与还原 一、数据库备份与还原二、PostgreSQL中操作数据库的备份与还原1. 使用pg_dump进行逻辑备份2. 使用pg_restore进行逻辑还原3. 使用pg_basebackup进行物理备份4. 还原物理备份注意事项 三、自动备份1. 使用pg_d…...
Flutter：自定义Tab切换，订单列表页tab，tab吸顶
1、自定义tab切换 view <Widget>[// 好评<Widget>[TDImage(assetUrl: assets/img/order4.png,width: 36.w,height: 36.w,),SizedBox(width: 10.w,),TextWidget.body(好评,size: 24.sp,color: controller.tabIndex 0 ? AppTheme.colorfff : AppTheme.color999,),]…...
SAS-proc sgplot绘图
1、绘图-直条图示例： 1.1 数据集 1.2 代码 proc sgplot data sashelp.cars;vbar origin / response msrp /* response：响应变量，Y轴 */stat mean /* stat：统计量，结果用均值呈现 */group type /* group&#…...
怎么使用python 调用高德地图api查询位置和导航?
环境： python 3.10 问题描述： 怎么使用python 调用高德地图api查询位置和导航? 解决方案： 要使用Python调用高德地图API查询位置和导航，需要先注册高德开发者账号并获取API Key。以下是基本步骤： 1. 注册高德开…...
pikachu靶场-敏感信息泄露概述
敏感信息泄露概述 由于后台人员的疏忽或者不当的设计，导致不应该被前端用户看到的数据被轻易的访问到。 比如： ---通过访问url下的目录，可以直接列出目录下的文件列表; ---输入错误的url参数后报错信息里面包含操作系统、中间件、开发语言的版…...
使用ssh推送项目到github
文章目录 1. 确保已生成 SSH 密钥2. 在 GitHub 上创建远程仓库3. 初始化本地项目4. 将本地项目与远程仓库关联5. 添加文件并提交补充：拉取远程修改（可选）6. 推送到 GitHub7. 完成总结 出现的问题解决方法：方法 1：允许合…...
SAP MRP运行出现例外消息怎么处理？例外消息的优先级、案例分享
【SAP系统PP模块研究】 #SAP #PP #MRP #例外消息 #MRP评估 一、MRP评估中的例外消息 例外消息，是SAP系统在MRP运行过程中自动产生的消息。对例外消息检查其产生的原因，及时与销售、生产、采购等相关部门进行沟通，并进行相应调整&#x…...
002-SpringBoot整合AI(Alibaba)
SpringBoot整合AI 一、引入依赖二、配置application.yml三、获取 api-key四、编写 controller五、起服务调用 一、引入依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><vers…...
Java中如何安全地停止线程?
大家好，我是锋哥。今天分享关于【Java中如何安全地停止线程?】面试题。希望对大家有帮助； Java中如何安全地停止线程? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在Java中，安全地停止线程是一项重要的任务，尤其…...
Apache Tomcat文件包含漏洞复现(详细教程)
1.漏洞原理 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，其安装后会默认开启ajp连接器，方便与其他web服务器通过ajp协议进行交互。属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...