一、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#一：transition 过渡效果
课程示例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： 往右100px translateY： 往下10px rotate： 旋转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： 往右100px translateY： 往下10px rotate： 旋转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： 往右100px translateY： 往下10px rotate： 旋转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： 往右100px translateY： 往下10px rotate： 旋转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变换性能并不是非常好，在低端机器上很容易出现卡顿。
七、面试题
