目录
1. 布局相关属性
2. 定位相关属性
3. 背景相关属性
4. 边框相关属性
5.文本相关属性
5.1 字体属性
5.2 文本属性
6. 列表相关属性
7. 其他属性
7.1 浮动 / 清除
7.2 轮廓outline
7.3 光标cursor
7.4 table相关属性
7.5 内容 / 文本超出
7.6 盒子 / 文本阴影效果
8. 动画相关属性
8.1 过渡
8.2 动画
8.21 创建动画关键帧
8.22 调用关键帧，触发动画
8.3 变形
8.31 transform
8.32 transform-origin
8.33 3D变形
1. 布局相关属性
① Flexbox： 弹性布局
② Grid： 网格布局
参考文章：HTML响应式布局(Flex+Grid+Media Queries+相对单位，万字总结)-CSDN博客
③ box-sizing：改变CSS盒模型
box-sizing: content-box; /* 标准盒子模型 */
box-sizing: border-box; /* IE盒子模型 *标准盒子模型：
由margin，boder，padding，content四部分组成。在标准盒子模型中，元素的width和height属性仅指content区域的宽度和高度
IE盒子模型：
margin，content（border + padding + content）两块组成。在IE盒子模型中，元素的width和height属性不仅包含content区域的宽度和高度，还包含了padding和border的宽度。换句话说，IE盒子模型的width和height属性是内容、内边距和边框的总和。
2. 定位相关属性
① static， 默认定位。按照常规文档流进行显示
② relative， 相对定位。通过left,bottom...等来设置相对自己的偏移，但元素所占空间保留在原 位，不会被挤占 ，不会影响正常文档流，通常用来用作包含元素。
③ absolute， 绝对定位。通过left,bottom...等来设置相对包含元素(除static的父级元素)的偏移 。元素所在空间会被挤占，而其本身则会覆盖在其他元素上方，会将元素移除正常的文档流 。
④ fixed， 固定定位。通过left,bottom...等来将元素相对于浏览器窗口（即包含元素为浏览器窗口）固定，会使元素脱离正常文档流 。适合用来固定导航。
⑤ sticky， 半固定定位。类似于fixed和relative的结合， 通过left,bottom...等来相对于浏览器窗口固定，但无论怎么滑动窗口元素位置都会相对于视窗固定，而其他元素属于正常文档流
⑥ z-index， 控制元素堆叠顺序。设置z轴偏移，取值为数字，值越大越靠近屏幕，默认为0。注意：只能给非static定位的元素设置z-index属性
3. 背景相关属性
① background-color： 设置元素背景颜色
② background-image： 设置元素背景图像，可以是URL或CSS渐变
③ background-repeat： 控制背景图像的重复方式
background-repeat: repeat | repeat-x | repeat-y | no-repeat;水平/垂直方向都重复（默认值） | 仅水平重复 | 仅垂直重复 | 不重复
④ background-position：设置背景图像的起始位置
background-position: top | bottom | left | right | center | 精确的位置值px、可同时选两个值用以描述背景图的起始位置。如：left bottom 位于左下⑤ background-attachment：控制背景图像是否随页面滚动
background-attachment: scroll | fixed | local;scroll 背景图随页面的其余部分滚动（默认值）fixed 背景图相对视口固定，即使页面滚动它也不会移动local 背景图相对元素内容区域固定，当元素有滚动条并滚动时，背景图随内容一起滚动
⑥ background-size：指定背景图像的大小
background-size: cover | contain | 具体尺寸;cover 背景图完全覆盖，可能会被裁剪以适合contain 背景图像完全适应，可能会被拉伸或压缩以适合具体尺寸（如100px 100px）或百分比（如50% 50%）⑦ background：简写属性，允许你在一个声明中设置上述所有背景属性。
注意：background-size和background-attachment不是background简写属性的直接部分
.box {background: antiquewhite url(../sites/img/3.jpg) no-repeat rightbottom;background-size: contain; /* 设置背景图大小 */
}4. 边框相关属性
① border-style：定义边框样式
.box {border-style:;none： 无边框。solid： 实线边框。dashed：虚线边框，由一系列短线段组成。dotted：点线边框，由一系列点组成。double：双线边框，由两条并排的实线组成。groove：凹槽边框，带有3D凹槽效果。ridge： 凸起边框，带有3D凸起效果。inset： 内嵌边框，带有3D内嵌效果。outset：外凸边框，带有3D外凸效果。
}② border-width：设置边框的粗细。通常是具体的像素值（如2px）
③ border-color：设置边框的颜色。十六进制值，RGB值，RGBA值或transparent值等
④ border：简写属性，允许同时设置边框的宽度、样式和颜色。语法：“border: 宽度 样式 颜色;”
border: 2px solid red;
⑤ 单独设置各边边框。border-top、border-right、border-bottom和border-left。
border-top-style: dotted;将仅设置元素上边框的样式为点线。
⑥ border-radius：设置元素四角的圆角半径，创建出更加平滑和美观的边框效果
border-radius: length | %;length：定义圆角的大小，可以是像素（px）、em、rem等单位%：表示圆角的大小是相对于元素尺寸的百分比。border-radius属性可以接受一到四个值，分别对应左上角、右上角、右下角、左下角的圆角半径。如果设置的值不足四个，则剩余的角落将按顺序重复使用已设置的值。比如：只设置了两个值时，第一个值用于左上角和右下角，第二个值用于右上角和左下角。
或单独设置每个角
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 30px;⑦ border-image：使用图像作为边框，可以指定边框图像的路径、切片、宽度、偏移量和重复方式。是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性的简写形式。如下：
border-image: source slice / width / outset repeat;source：图像路径，URL | CSS渐变
slice： 图像开始分割的位置，分9个区域（上、右、下、左以及四个角），px | % | fill关键字
width： 图像宽度，数值 | % | auto。默认为1，图像宽度等于边框宽度
outset：图像外延尺寸，边框图像区域超出边框盒子的距离
repeat：图像平铺方式，stretch（拉伸） |repeat（重复） |round（重复并尽可能完整地显示图像）|space（重复并均匀分布空白）示例:
.box {border-width: 2px;border: 30px solid transparent; /* 透明边框，为border-image提供空间 */border-image: url('../sites/img/2.jpg') 30 30 round;/* 或分开写： border-image-source: url('border.png'); border-image-slice: 30 30; border-image-width: 30; border-image-repeat: round; */
}5.文本相关属性
5.1 字体属性
① font-size：字体大小。 值为 绝对单位（如px、pt）或相对单位（如em、rem、%）
②font-weight：字体粗细。值为 关键字（normal、bold等）或数值（100到900）
③ font-style：字体风格。 值为 normal普通 | italic斜体
④ font-family：字体系列。可指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。如 ：微软雅黑，宋体.....等（但需要系统已安装）
⑤ font：简写属性，font : font-style | font-weight | font-size | font-family。必需按顺序写
5.2 文本属性
① color：文本颜色
② line-height：行高。 取值为：数值、单位或百分比
③ text-align： 文本行内文的本水平对齐方式。取值为：left、right 、 center、justify
④ vertical-align： 文本行内的文本垂直对齐方式。取值为：baseline、top、middle、bottom
⑤ text-indent：文本的首行缩进。取值为：px、em 等
⑥ text-decoration：文本装饰线。
text-decoration：underline | line-through | overline | none
下划线 | 删除线 | 上划线 | 无装饰线⑦ letter-spacing：字符间距。正值增加间距，负值减少间距
⑧ word-spacing：单词间距。与letter-spacing类似，但作用于单词之间，所以只对英文有效
⑨ white-space：空白的处理方式。文本超出后是否换行。取值：nowrap以防止文本换行
6. 列表相关属性
① list-style-type：设置列表前的标记
/*此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了*/
ul {list-style: disc 实心圆点（无序列表默认）circle 空心圆square 方块none 无标记decimal 数字（有序列表默认）upper-roman 大写罗马数字lower-roman 小写罗马数字upper-alpha 大写字母lower-alpha 小写字母
}② list-style-image：用图像作为列表项的标记。值为URL
③ list-style-position：设置列表项标记的位置。
ul {list-style-position: inside 标记位于列表项内容内outside 标记位于列表项内容外（默认值）
}④ list-style：简写属性。如 { list-style: square inside url('bullet.png'); }
7. 其他属性
7.1 浮动 / 清除
① 浮动
float :通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。
float属性主要用于布局设计，如创建多栏布局、导航菜单或实现文本环绕图像的效果。
子元素{float: left | right | none ;左浮动 | 右浮动 | 不浮动（默认）
} 浮动的坏处——父元素高度塌陷：
当容器内的子元素都设置为浮动时，这些子元素会脱离文档流，不再占据原本的空间。这会导致父容器无法被撑开，其高度可能会塌陷为0，除非显式地设置了父容器的高度。
② 清除浮动
由于高度塌可能会造成页面布局混乱，因此常常需要清除浮动。
方式1：clear属性，在浮动元素之后添加一个空元素并为其设置clear: both;样式。以防止后续元素浮动到该元素的旁边。方法简单直接，但可能会增加HTML的冗余代码。
浮动子元素后的元素{clear: both两侧不允许出现浮动元素
}方式2：父元素触发BFC（块级格式化上下文），方法较多.....略
方式3：伪元素（clearfix），为父元素上添加一个伪元素（如::after），并设置其样式来清除浮动，好用且无副作用。
父元素::after {content: '';display: block;clear: both;
}方式4：显示设置父元素高度，如果父元素的高度可以固定或预知，那么直接为父元素设置高度也可以解决高度塌陷的问题。但这种方法不够灵活，不适用于高度动态变化的情况
7.2 轮廓outline
轮廓outline，用于在元素周围绘制一条轮廓线，位于border外围，可以突出显示元素。不会影响页面布局或元素的可点击区域。
① outline-style，轮廓线样式。和 boder-style 可选值一样，效果也基本一致
.box {outline-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset;}② outline-width，轮廓线粗细。通常是具体的像素值（如2px）
③ outline-color，轮廓线的颜色。
④ outline，上面三个属性简写：
.element { outline: 2px solid red;
} outline与border的区别：
- border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
- 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
-
border会占用元素的空间，影响元素的大小和布局；而outline不会
7.3 光标cursor
用于设置鼠标指针在元素上悬停时显示的样式
- auto：浏览器根据元素的上下文自动选择合适的光标指针样式
-
default：默认光标
-
pointer，手形，通常用于链接、按钮或其他可点击的元素上
-
move，表示可移动的
-
text，文本选择光标。通常不需要显式设置，因为输入框默认就是这种样式。
-
wait，旋转圆圈，表示程序正忙，需要等待。
-
自定义样式，使用
url()函数指定光标图片。通常和默认样式一起使用防止浏览器不支持而无法加载。如：{ cursor: url(..), move }
7.4 table相关属性
table常用样式的属性
- border在表格外围设置边框
- border-collapse表格中相邻边框是否合并，取值：seprate、collapse
- border-spacing设置单元格之间的距离。当相邻边框合并时，不起作用。
th/td常用样式属性：
- border为单元格设置边框
- padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）
7.5 内容 / 文本超出
① overflow
处理元素超出指定大小时的内容。不可用于行内元素（其大小仅由内容决定）
- visible： （默认值）内容不裁剪，会渲染在元素框之外。
- hidden： 超出部分的内容会被裁剪，并隐藏。
- scroll： 超出部分被裁剪，但有滚动条以便查看其内容。无论是否出现溢出始终出现滚动条
- auto： 和sroll作用相同，但auto只会在内容溢出时才会出现滚动条。
② text-overflow
指定当文本内容超出其容器边界时的显示方式。
clip：默认值，将溢出的文本裁剪掉，不显示任何内容ellipsis：表示在溢出的文本末尾显示省略号（...）
使用示例
如：让文字超出部分显示为省略号（....）
<style>
.container { width: 200px; /* 设置容器宽度 */ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 文本溢出时显示省略号 */ border: 1px solid #000; /* 添加边框以便观察效果 */
}
</style> 注意：text-overflow本身只是一个“注解”，它指定了当文本溢出时应该做什么，但并不会改变文本的布局或溢出行为，这些需要其他属性来配合实现。所以通常需要结合使用overflow: hidden和white-space: nowrap;属性。
7.6 盒子 / 文本阴影效果
① box-shadow
给盒子或者说边框，添加阴影效果
.box{/*基本阴影*/box-shadow: 1px 2px 5px 2px rgba(191, 195, 198,0.8);/*或内部阴影*/box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);/*或内多重阴影*/box-shadow: 3px 3px 5px 4px rgba(17, 228, 186, 0.9),-1px -1px 5px 4px rgba(73, 37, 189, 0.9);
}- 水平偏移量(1px): 阴影在水平方向上相对于元素的位置。正值向右，负值向左。
- 垂直偏移量(2px): 阴影在垂直方向上相对于元素的位置。正值向下，负值向上。
- 模糊半径(5px ): 阴影的模糊程度。越大越模糊，越小越清晰。
- 扩展半径 (2px): （可选值），阴影的大小。正值使阴影变大，负值使阴影缩小。
- 颜色rgba(191, 195, 198,0.8): 阴影的颜色。0.8控制透明度80%；
- 内阴影 inset： (可选关键字)，如果使用，阴影将作为内阴影显示在元素内部，而非外部
- 多重阴影： 可以在元素上添加多个阴影，通过参数控制样式
② text-shadow
给文本添加阴影效果，与box-shadow多处相似
.text{text-shadow: 2px 2px 4px rgba(68, 81, 204, 0.8);/*或多重阴影*/text-shadow: 1px 1px 2px #000, 0 0 10px #ff0000,0 0 20px #00ff00;
}
水平位置（2px）： 水平阴影的位置。允许负值
垂直位置（2px）： 垂直阴影的位置。允许负值
模糊距离（4px）： 越大越模糊，越小越清晰
阴影颜色 rgba(68, 81, 204, 0.8)：略
7.7 渐变色
CSS渐变色允许你创建平滑的颜色过渡效果，它可以应用于背景、边框、文本等。
① 线性渐变（Linear Gradient）：线性渐变可以沿着一条直线方向发生颜色变化
background: linear-gradient(direction, color-stop1, color-stop2, ...);-
direction：渐变的方向，可以是角度（如45deg）或预定义的方向（如to right、to bottom right等）。
-
color-stop：颜色节点，指定渐变过程中颜色的位置和颜色值。
示例：
/* 从上到下，蓝色到红色的渐变 */
background: linear-gradient(to bottom, blue, red); /* 45度角渐变，从黄色开始，到绿色，再到蓝色 */
background: linear-gradient(45deg, yellow, green, blue); /* 使用百分比定义颜色节点位置 */
background: linear-gradient(to right, red 20%, yellow 80%);② 径向渐变（Radial Gradient）：径向渐变由它的中心定义，并且颜色沿着圆形或椭圆形路径向外扩散。
background: radial-gradient(shape size at position, start-color, ..., last-color);-
shape：渐变的形状，可以是circle（圆形）或ellipse（椭圆形，默认值）。
-
size：渐变的尺寸，可以是关键字（如closest-side、farthest-corner等）或具体尺寸（如100px 150px）
-
position：渐变中心的位置，可以使用关键字、百分比或长度值。
-
start-color, ..., last-color：定义渐变中的颜色节点。
示例：
/* 从中心开始，红色到黄色，再到绿色的圆形渐变 */
background: radial-gradient(circle, red, yellow, green); /* 椭圆形渐变，从左上角开始，蓝色到紫色 */
background: radial-gradient(at left top, blue, purple); /* 定义尺寸和位置的椭圆形渐变 */
background: radial-gradient(ellipse 50% 70% at 50% 150%, red, orange, yellow, green, blue, indigo, violet);8. 动画相关属性
8.1 过渡
CSS过渡（transition）属性允许CSS属性值在一定的时间间隔内平滑地过渡。这种效果可以增强用户体验，使网页的交互更加自然和吸引人。
① transition-property，指定哪些CSS属性将应用过渡效果。
transition-property:none：不应用过渡效果。all（默认值）：所有可过渡的属性都将应用过渡效果。[property name]：指定一个或多个属性名称，多个属性之间用逗号分隔。注意：所有数值类型的属 性，都可以参与过渡， ⽐如width、height、 left、top、border，radius、opacity等。且必须是从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
② transition-duration（必选），定义过渡效果持续的时间。时间的单位：s和ms ，1s=1000ms
如果未指定持续时间，则过渡效果不会执行。
③ transition-timing-function，指定过渡效果的速度如何随时间变化。
transition-timing-function:linear：匀速过渡。ease（默认值）：开始和结束较慢，中间加速。ease-in：开始慢，然后加速。ease-out：开始快，然后减速。ease-in-out：先加速后减速。cubic-bezier(n,n,n,n)：允许自定义贝塞尔曲线。n值在0-1之间④ transition-delay，指定过渡效果开始前的延迟时间。时间的单位：s和ms
⑤ transition，简写属性。同时设置过渡相关的所有属性（按顺序）
transition: property duration timing-function delay;过渡效果示例：
div { width: 100px; height: 100px; background-color: blue; transition: width 2s ease-in-out 1s; /* 简写形式 */ /* 或者分开写 */ transition-property: width;transition-duration: 2s;transition-timing-function: ease-in-out;transition-delay: 1s;
} div:hover { width: 200px; /* 鼠标悬停时，宽度将在延迟1秒后的2秒内平滑过渡到200px */
}8.2 动画
动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 而动画可以⾃动触发
8.21 创建动画关键帧
@keyframes 规则，用于创建动画。你需要指定一个动画名称，以及动画期间的一系列关键帧
⽅法⼀：from..to
@keyframes 关键帧名称{from{初始状态属性}to{结束状态属性}
}
⽅法⼆：百分比
@keyframes 关键帧名称{0%{初始状态属性}50%（中间还可以再添加关键帧）100%{结束状态属性}
}注意：帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置。可以同时设置关键帧，⽤逗号（,）隔开就⾏
8.22 调用关键帧，触发动画
① animation-name，绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画 (必选)
② animation-duration，动画的完成时间，告诉 系统动画持续的时长 （必填）
③ animation-timingfunction，定义动画的速度曲线（与过渡里面的类似）
④ animation-delay，动画在启动前的延迟间
⑤ animation-iterationcount，动画的播放次数。无限次播放：infinite;
⑥ animation-direction，定义动画播放的方向。
animation-direction: normal: （默认值）顺序播放reverse：倒序播放alternate：正向和反向之间交替播放。先正后反alternate-reverse：反向和正向之间交替播放。先反后正⑦ animation-fill-mode，规定当动画不播放时 （完成时/播放延迟时），应用到的元素样式
animation-fill-modenone（默认值）：不改变默认行为。forwards： 动画完成后，保持最后一个关键帧中定义的样式。即动画结束后，元素将保持动画结束时的状态。backwards：在动画开始前，应用第一个关键帧中定义的样式。（需要动画的延迟时间足够长，才能显示出来）both：同时应用forwards和backwards规则。⑧ animation-play-state，告诉系统当前动画是否 需要暂停
animation-play-staterunning（默认值）：设置为running时，动画将开始或继续播放。paused：设置为paused时，动画将暂停播放。如果动画正在播放中，将其animation-play-state更改为paused会立即停止动画，但动画的当前状态（如元素的位置、大小等）会保持在暂停的那一刻。⑨ animation，简写属性。
animation: animation-name animation-duration animation-timingfunction animation-delay animation-iterationcount animation-directionanimation-fill-mode animation-play-state动画效果示例：
@keyframes example {0% {width: 0px;background-color: red;}50% {width: 200px;background-color: orange;}100% {width: 300px;background-color: yellow;}
}div {height: 100px; animation: example 4s linear 1s infinite alternate both;/* 或分开写 */animation-name: colorChange;animation-duration: 4s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate;animation-fill-mode: both;
}8.3 变形
CSS变形（Transform）是指通过CSS属性来改变元素的形状或位置，而不会影响页面的布局（即不会脱离文档流）。它支持对元素进行旋转、缩放、移动（平移）、倾斜以及更复杂的矩阵变换。
注意：变形通常会结合transition或animation的速度变化属性来设置平滑的过渡效果。
8.31 transform
这是用于实现元素变形的核心属性。（注意：变形对于⾏内元素是没有效果的。变形不会影响其他元素。）它可以接受一个或多个变形函数，如下：
① translate(X，Y，Z)，平移。
1）X轴正值向右，负值向左。Y轴正值向下，负值向上。
2）参数值可以是px，可以是% ，百分⽐是相对于⾃身计算
3）位移是相对于元素自己的原位置
4）也可单独对X/Y/Z轴进行设置。如下
//垂直⽔平居中的效果position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transform: translateX(-50%) translateY(-50%);② rotate(X，Y，Z)，旋转。
1）默认围绕中⼼点转动。
2）默认的单位是deg，⽐如rotate（45deg），正值顺时针，负值逆时针。
3）可以单独对x轴y轴z轴进⾏设置。rotateX() ，指元素围绕其 X 轴旋转；rotateY() ，元素围绕其 Y 轴旋转；rotateZ() , 元素围绕其 Y 轴旋转
div {width: 100px;height: 100px;background-color: aqua;transition: 2s linear;
}
div:hover {/* 当鼠标悬停在div上时，顺势正旋转360度 */transform: rotate(360eg);/*绕X/Y轴转*/transform: rotateX(360deg) rotateY(360deg);}③ scale(X，Y，Z)，缩放。
1）元素根据中⼼原点进⾏缩放。
2）默认值是1，没有单位，0~1元素缩⼩，0则是消失；1以上元素变⼤。
3）也可单独对X/Y/Z轴进行设置scaleX()只X轴缩放，scaleY()只Y轴缩放
transform: scale(3);/* 放大3倍 */
transform: scale(0.5);/* 缩小到一半 */④ skew（X，Y），倾斜
1)通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。
2）默认的单位是deg。（左上⻆为参照），X正向左，负向右。Y正向上，负向下。
3）可单独对 X轴 Y轴进⾏设置。skewX()/skewY()
transform: skew(45deg, 45deg);/*X&Y倾斜45°*/8.32 transform-origin
变形原点
1）用于设置变形的原点（即变形的中心点）。默认，变形的原点是元素的中心点（50% 50%）。通过改变这个值，可以控制元素变形的方向和位置。
2）设置偏移量值都是从元素左上⻆开始的。
3）transform-origin（X，Y），X，Y可以是⽅向值（left、center、top、right、bottom等），也可以是px、%为单位的数值。
8.33 3D变形
上面我们提到部分变形函数能实现Z轴方向上的变形。但并没有讲解演示。因为，如果需要在视觉上展现出三维变化的效果。我们需要对变形元素的父元素进行一些操作：
① transform-style
1）它用于定义当元素变形时，其是如何在三维空间中呈现的。
2）flat（默认值）：表示所有子元素在二维空间中被渲染，不考虑三维效果。即使应用了三维变形，在视觉上不会有任何效果，因为所有内容都被压平在二维画布上。
3）preserve-3d：表示子元素在三维空间中被渲染。
4）transform-style是用于设置父元素的属性
② perspective和 perspective-origin
1）这两个属性用于在3D变形中创建透视效果
2）perspective属性用于定义用户与3D空间内元素之间的距离，这个距离会影响元素在三维空间中的视觉效果，使得元素呈现近大远小的透视效果。它的值是一个长度，表示可透视的最大距离。
3）perspective-origin属性用于定义3D元素所基于的X轴和Y轴的位置，即透视的起点或观察者的角度。
③ translateZ，rotateZ和 scaleZ
作用和上面介绍的二维变形差不多，只是把参考方向/坐标轴换成了垂直于屏幕的Z轴
3D变形示例
................HTML...............
<div class="cube"><div class="face front">前</div><div class="face back">后</div><div class="face right">右</div><div class="face left">左</div><div class="face top">上</div><div class="face bottom">下</div>
</div>
dy>
.................CSS................
.cube {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotateCube 10s infinite linear;
}
.face {position: absolute;width: 200px;height: 200px;background: rgba(255, 255, 255, 0.8);border: 1px solid #ccc;line-height: 200px;font-size: 24px;font-weight: bold;color: #333;text-align: center;display: flex;justify-content: center;align-items: center;
}
.front {transform: translateZ(100px);
}
.back {transform: rotateY(180deg) translateZ(100px);
}
.right {transform: rotateY(90deg) translateZ(100px);
}
.left {transform: rotateY(-90deg) translateZ(100px);
}
.top {transform: rotateX(90deg) translateZ(100px);
}
.bottom {transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotateCube {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}
}CSS基础笔记：前端笔记【二】：CSS
若有帮助，愿点赞收藏，以表支持！！！！
若有错误或描述不当，烦请评论或私信指正，万分感谢 ！！！！😃