一、CSS3简介
1、CSS3概述
CSS3 是 CSS2 的升级版本，他在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS在未来会按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html
CSS3 的新特性如下：
1、新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2、新增了更好的视觉效果，例如：圆角、阴影、渐变等。
3、新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
4、新增了全新的布局方案 —— 弹性盒子。
5、新增了 Web 字体，可以显示用户电脑上没有安装的字体。
6、增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
7、增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
8、增加动画与过渡效果，让效果的变换更具流线性、平滑性。
..............
2、CSS3私有前缀
2.1 什么是私有前缀
如下代码中的 -webkit- 就是私有前缀
div {width : 400px ;height : 400px ;-webkit- border-radius : 20px ;}
2.2 为什么要有私有前缀
W3C 标准提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
举个例字：
-webkit-border-radius: 20px;
-moz- border-radius : 20px ;-ms- border-radius : 20px ;-o- border-radius : 20px ;border-radius : 20px ;
查询CSS3兼容性的网站：https://caniuse.com/
2.3 常见浏览器私有前缀
- Chrome 浏览器： -webkit
- Safari 浏览器： -webkit
- Firefox 浏览器： -moz
- Edge 浏览器： -webkit-
- 旧 Opera 浏览器： -o-
- 旧 IE 浏览器： -ms-
注意：
我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。
二、CSS3基本语法
1、CSS3新增长度单位
1）rem 根元素字体大小的倍数，只与根元素字体大小有关。
2）vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%
3）vh 视口高度的百分之多少 10vh 就是视口高度的 10%视口宽度其实就是指整个浏览器页面得高度和宽度，设置上面两个单位时，当浏览器页面放大或者缩小时，对应的元素也会跟着放大或者缩小，永远占相同的比例。在移动端用的比较多。
4） vamx 视口宽高中大的那个百分之多少。（了解即可）
5）vmin 视口宽高中小的那个的百分之多少。（了解即可）
2、CSS新增颜色设置方式
CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla ，由于之前已经详细讲解，此处略过。
3、CSS3新增选择器
CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、否定伪类、伪元素；这些在CSS2中已经详细讲解，此处略过。
4、CSS3新增盒模型相关属性
4.1 box-sizing 怪异盒模型
使用box-sizing 属性可以设置盒模型的两种类型：
| 可选值 | 含义 |
| content-box | width 和 height 设置的是盒子内容区的大小。（默认值） |
| border-box | width 和 height 设置的是盒子总大小。（怪异盒模型） 就是不管你的padding 还有 border 的大侠，我盒子的模型就是固定了。（比较有用） |
4.2 resize 调整盒子大小
使用 resize 属性可以控制是否允许用户调节元素尺寸。
| 值 | 含义 |
| none | 不允许用户调整元素大小。（默认） |
| both | 用户可以调节元素的宽度盒高度。 |
| horizontal | 用户可以调节元素的宽度。 |
| vertical | 用户可以调节元素的高度。 |
4.3 box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow : h-shadow v-shadow blur spread color inset ;
各个值得含义：
| 值 | 含义 |
| h-shadow | 水平阴影得位置，必须填写，可以为负值 |
| v-shadow | 垂直阴影的位置，必须填写，可以为负值 |
| blur | 可选，模糊举例 |
| spread | 可选，阴影得外延值 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
默认值：box-shadow：none 表示没有阴影
示例：/* 写两个值，含义：水平位置、垂直位置 */box-shadow : 10px 10px ;/* 写三个值，含义：水平位置、垂直位置、颜色 */box-shadow : 10px 10px red ;/* 写三个值，含义：水平位置、垂直位置、模糊值 */box-shadow : 10px 10px 10px ;/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */box-shadow : 10px 10px 10px red ;/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */box-shadow : 10px 10px 10px 10px blue ;/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */box-shadow : 10px 10px 20px 3px blue inset ;
应用示例：鼠标放上去时，产生阴影，类似于被选中的效果。 小米官网。
4.4 opacity不透明度
opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间得小数，0 是完全透明得，1 表示完全不透明。
opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
5、CSS3新增背景属性
5.1 background-origin
作用：设置背景图的原点
语法：
1、padding-box：从padding区域开始显示背景图像。--默认值
2、border-box：从border区域开始显示背景图像。
3、content-box：从content区域开始显示背景图像。
css"> /* 指定背景图 */background-image: url('./bg01.jpg');/* 背景图是否重复 */background-repeat: no-repeat;/* 背景图的起始点：padding-box 参考padding的边缘content-box 参考内容区的边缘*/background-origin: content-box;5.2 backgroud-clip
作用：设置背景图的向外裁剪区域。
语法：
1、border-box：从border区域开始向外剪裁背景。--默认值
2、padding-box：从padding区域开始向外裁剪背景。
3、content-box：从content 区域开始向外裁剪背景。
4、text：背景图只呈现在文字上。
注意：若值为text，那么backgroun-clip 要加上 -webkit- 前缀。
css"> /* 设置背景图的向外裁剪区域，意思就是控制背景图的显示范围,超出某个区域以外的背景就不呈现了，padding-box 超出padding以外的区域不呈现content-box 超出content-box以外的区域不呈现背景图片跟背景颜色都受整个属性控制 */background-clip: content-box; 
5.3 backgroud-size
作用：设置背景图的尺寸。
语法：
1、用长度值指定背景图片大小，不允许负值。
background-size: 300px 200px;
2、用百分比指定背景图片大小，不允许负值。
background-size : 100% 100% ;
3、auto：背景图片的真实大小。--默认值
4、contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
background-size: contain;
5、cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。--相对比较好的选择
background-size: cover;
css"> /* 背景图大小 宽 和 高 */background-size: 400px 400px;/* 背景图大小参考其父元素的百分比 */background-size: 100% 100%;/* 背景图等比例缩放，直到被容器装下 */background-size: contain;/* 等比例缩放，尽可能显示全 */background-size: cover;5.4 backgorund 复合属性
语法：
background: color url repeat position / size origin clip
注意：
1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。2. size 的值必须写在 position 值的后面，并且用 / 分开。
css">/* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */
background: red url('./bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box;5.5 多背景图
CSS3允许元素设置多个背景图片
/* 添加多个背景图 */
background : url ( ../images/bg-lt.png ) no-repeat ,
url ( ../images/bg-rt.png ) no-repeat right top ,
url ( ../images/bg-lb.png ) no-repeat left bottom ,
url ( ../images/bg-rb.png ) no-repeat right bottom ;
6、CSS3新增边框属性
6.1 边框圆角
在CSS3 中，使用border-radius 属性可以将盒子变成圆角。
同时设置四个角的圆角：
border-radius:10px;
分开设置每个角的圆角（几乎不用）：
| 属性名 | 作用 |
| border-top-left-radius | 设置左上角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径，y半径。 |
| border-top-right-radius | 设置右上角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的 x 半径，y 半径。 |
| border-bottom-right-radius | 设置右下角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径、y半径 |
| border-bottom-left-radius | 设置左下角圆角半径： 1、一个值是正圆半径 2、两个值分别是椭圆的x半径、y半径。 |
分开设置每个角的圆角，综合写法（几乎不用）：
border-raidus : 左上角 x 右上角 x 右下角 x 左下角 x / 左上 y 右上 y 右下 y 左下 y
css"> /* 圆角的半径为 50px ，当像素值为宽或高的一半时，会变成一个圆 */border-radius: 50px;/* 父元素宽或高的50% */border-radius: 50%;/* 单独设置左上角为圆角 *//* border-top-left-radius: 50px; *//* 100指的是横向的半径 50指的是纵向上的半径，类似一个椭圆 */border-top-left-radius: 100px 50px;/* 单独设置右上角为圆角 */border-top-right-radius: 50px;/* 单独设置左下角为圆角 */border-bottom-left-radius: 50px;/* 单独设置右下角为圆角 */border-bottom-right-radius: 50px;border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px;6.2 边框外轮廓（了解）
outline-width：外轮廓的宽度。
outline-color：外轮廓的颜色。
outline-style：外轮廓的风格。
none：无轮廓
dotted：点状轮廓
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
outline-offset：设置外轮廓与边框的距离，政府之都可以设置。
注意：outline-offset 不是 outline 的子属性，是一个独立的属性。
outline复合属性：
outline:50px solid blue;
7、CSS新增文本属性
7.1 文本阴影
在CSS3中，我们可以使用 text-shadow 属性给文本添加阴影。
语法：
text-shadow : h-shadow v-shadow blur color ;
| 值 | 描述 |
| h-shadow | 必须写，水平阴影的位置，允许负值。 |
| v-shadow | 必须写，垂直阴影的位置。允许负值。 |
| blur | 可选，模糊的距离。 |
| color | 可选，阴影的颜色 |
默认值：text-shadow:none 表示没有阴影。
css"> text-shadow: 3px 3px 10px red;7.2 文本换行
在CSS3中，我们可以使用 white-space 属性设置文本换行方式。
常用值如下：
| 值 | 含义 |
| normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） |
| pre | 原样输出，与pre标签的效果相同 |
| pre-wrap | 在pre效果的基础上，超出元素边界自动换行。 |
| pre-line | 在pre效果的基础上，超过元素边界自动换行，且只识别文本中的换行，空格会忽略。 |
| nowrap | 强制不换行 |
7.3 文本溢出
在CSS3中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：
| 值 | 含义 |
| clip | 当内联内容溢出时，将溢出部分裁切掉。（默认值） |
| ellipsis | 当内联内容溢出块容器时，将溢出部门替换为...。 |
注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible
值， white - space 为 nowrap 值。
7.4 文本修饰
CSS3升级了 text-decoration属性，让其变成里复合属性
text-decoration : text-decoration-line || text-decoration-style || text-decoration-color
子属性及其含义：
text-decoration- line 设置文本装饰线的位置
- none ： 指定文字无装饰 （默认值）
- underline ： 指定文字的装饰是下划线
- overline ： 指定文字的装饰是上划线
- line-through ： 指定文字的装饰是贯穿线
text-decoration-style 文本装饰线条的形状
- solid ： 实线 （默认）
- double ： 双线
- dotted ： 点状线条
- dashed ： 虚线
- wavy ： 波浪线
text-decoration- color 文本装饰线条的颜色
7.5 文本描边
- -webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
- -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
- -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。
8、CSS3新增渐变
8.1 线性渐变
多个颜色之间的渐变，默认从上到下渐变。
background-image: linear-gradient(red,yellow,green);
使用关键词设置线性渐变的方向。
background-image : linear-gradient ( to top , red , yellow , green );background-image : linear-gradient ( to right top , red , yellow , green );
使用角度设置线性渐变的方向。
background-image : linear-gradient ( 30deg , red , yellow , green );
调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px ,green 150px)
css"> .box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {/* 默认从上到下的，从红 到 黄 到 绿 进行渐变,理论上可以加无限个渐变色*/background-image: linear-gradient(red,yellow,green);}.box2 {/* 从左往右进行渐变，起始颜色是第一个，最后一个绿色还可以写 to right top 往右上方向 等等 */background-image: linear-gradient(to right,red,yellow,green);}.box3{/*顺时针转30度进行渐变 */background-image: linear-gradient(20deg,red,yellow,green);}.box4{/* 50px时必须时纯红色 100px时必须是纯黄色 */background-image: linear-gradient(red 50px,yellow 100px,green);}.box5{/* 50px时必须时纯红色 100px时必须是纯黄色 */background-image: linear-gradient(20deg,red 50px,yellow 100px,green);font-size: 50px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;-webkit-background-clip: text;}
8.2 径向渐变
多个颜色之间的渐变，默认从圆心四散，（注意：不一定是正圆，要看容器本身宽高比）
background-image : radial-gradient ( red , yellow , green );
使用关键词调整渐变圆的圆心位置
background-image: radial-gradient(at right top,red,yellow,green);
使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green);
调整渐变形状为正圆。
background-image: radial-gradient(circle,red,yellow,green);
调整形状的半径。
background-image : radial-gradient ( 100px , red , yellow , green );background-image : radial-gradient ( 50px 100px , red , yellow , green );
调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
8.3重复渐变
无论线性渐变，还是径向渐变，在还没有发生渐变的位置，继续进行渐变，就为重复渐变。
- 使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient。
- 使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient。
我们可以利用渐变，做出很多有意思的效果：例如横格纸、立体球等。
9、web字体
9.1 基本用法
可以通过@font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
语法（间歇方式）：
@font-face {font-family : " 情书字体 " ;src : url ( './ 方正手迹 .ttf' );}
css"> @font-face{font-family: "哈哈字体";src: url('./方正手迹.ttf');}h1 {font-size: 100px;font-family: '哈哈字体';}语法（高兼容性写法）：
@font-face {font-family : "atguigu" ;font-display : swap ;src : url ( 'webfont.eot' ); /* IE9 */src : url ( 'webfont.eot?#iefix' ) format ( 'embedded-opentype' ), /* IE6-IE8 */url ( 'webfont.woff2' ) format ( 'woff2' ),url ( 'webfont.woff' ) format ( 'woff' ), /* chrome 、 firefox */url ( 'webfont.ttf' ) format ( 'truetype' ), /* chrome 、 firefox 、 opera 、 Safari,Android*/url ( 'webfont.svg#webfont' ) format ( 'svg' ); /* iOS 4.1- */}
9.2 定制字体
中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
可使用阿里 web 字体定制工具：https://www.iconfont.cn/webfont
9.3 字体图标
相比图片更加清晰。
灵活性高，更方便改变大小、颜色、风格等。
兼容性好，IE也能支持。
字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。
阿里图标官网地址： https://www.iconfont.cn/
起始就是说类似于某个图标，如果设计成图片的话，放大会失帧，但是如果使用这种字体图标，就不会存在失帧的情况。
使用步骤如下：
先登录上方的阿里图标网站，先注册一个账号，然后选中中意的某些图标，选择添加到某个项目中。
例如我上面随便选的几个图标，如果我想引入到我自己的系统中，有三种引入方式;
而且我们可以选择，下载到本地，或者使用该图标的在线连接。
首先使用下载到本地：
下载之后如图所示：
1、第一种方式：Unicode 方式：
首先将这三个文件引入到你得项目文件的目录下：
然后然后demo_index.html 文件中的操作提示：
引入下面的代码：
css"> @font-face {font-family: 'iconfont';/* 具体路径可以换，看你引入到哪个文件下 */src: url('iconfont.woff2?t=1734577724578') format('woff2'),url('iconfont.woff?t=1734577724578') format('woff'),url('iconfont.ttf?t=1734577724578') format('truetype');}.iconfont {font-family: "iconfont" !important;/* 可以当作字体对待，通过调整字体大小，来调整图标大小 */font-size: 100px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}然后通过元素字体编码，应用于页面
通过引入上面的字体编码，既可以应用于项目中。
css"> <span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></span> 
此种方式只能引入黑白色的图标。
第二种方式：font class 方式
将下方css文件引入到项目中：
然后直接引入该CSS文件即可：
<!-- 此处引入连接根据你文件的位置而定 --><link rel="stylesheet" href="./iconfont.css"><style>.iconfont {/* 可以当作字体对待，通过调整字体大小，来调整图标大小 */font-size: 100px;}</style>然后通过 图标的类名，应用于页面
css"> <span class="iconfont icon-xiangsu-zhadan"></span><span class="iconfont icon-xiangsu-huoyan"></span><span class="iconfont icon-xiangsu-huangsehua"></span><span class="iconfont icon-xiangsu-hongmogu"></span>
第三种方式：Symbol，可以应用彩色图标。
将下方JS文件引入到项目中：
然后将js文件引入该项目中，并大致设置样式
css"> <!-- 此处引入连接根据你文件的位置而定 --><script src="./iconfont.js"></script><style>/* 样式可以自行调整 */.icon {width: 100px;height: 100px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>通过图标类型应用于页面：
<!-- svg 跟 use 标签都是h5新提出的标签，专门用来呈现矢量图的矢量图就是放大也不失帧的图 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangsu-zhadan"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangsu-huoyan"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangsu-huangsehua"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangsu-hongmogu"></use></svg> 
第三种方式也存在一定的问题：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
所以一般用第二种方式的最多！
使用在线连接，无需下载字体：
需要先在页面上生成在线连接：
只需要将每个方式生成的链接 ，换成在线的链接即可，不需要下载任何方式。
10、2D变换
前提：二维坐标如下所示：
10.1 2D位移
2D 位移可以改变元素的位置，具体使用方式如下：
1、先给元素添加 转换属性 transform
2、编写 transform 的具体值，相关可选值如下：
| 值 | 含义 |
| translateX | 设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。 |
| translateY | 设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。 |
| translate | 一个值代表水平方向，两个值代表：水平和垂直方向。 |
3、注意点：
1、位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2、与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
3、浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。就是优先选择位移。
4、transform 可以链式编写，例如：transform: translateX(30px) translateY(40px);
5、位移对行内元素无效。
6、位移配合定位，可实现元素水平垂直居中。.box {position : absolute ;left : 50% ;top : 50% ;transform : translate ( -50% , -50% );}
css"> /* 沿X轴方向正向移动 50px */transform: translateX(50px);/* 沿X轴方向反向移动 50px */transform: translateX(-50px);/* 沿Y轴方向正向移动 50px */transform: translateY(50px);/* 沿Y轴方向负向移动 50px */transform: translateY(-50px);/* 沿X轴，Y轴正向各移动50px */transform: translate(50px,50px);/* 沿X轴，Y轴移动自身宽度，自身高度的50% */transform: translate(50%,50%);10.2 2D缩放
2D 缩放是指：让元素放大或缩小，就使用方式如下:
1、先给元素添加 转换属性 transform
2、编写 transform 的具体值，相关可选值如下：
| 值 | 含义 |
| scaleX | 设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。 |
| scaleY | 设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。 |
| scale | 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放，两个值分别代表：水平缩放、垂直缩放。 |
3、注意点：
1. scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。2. 借助缩放，可实现小于 12px 的文字。
3.缩放不能应用于行内元素上
/* x轴方向上缩放 大于1是放大 小于1 是缩小 */
transform: scaleX(2);
transform: scaleX(0.5);
/* y轴方向上缩放 大于1是放大 小于1 是缩小 */
transform: scaleY(2);
transform: scaleY(0.5);
/* x轴，y轴 同时进行放大或缩小 */
transform: scaleX(1.5) scaleY(0.5);
/* x，y方向同时放大1.5 */
transform: scale(1.5);
10.3 2D旋转
2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：
1、先给元素添加转换属性 transform
2、编写 transform 的具体值，相关可选值如下：
3、2D旋转其实就是指绕着Z轴转，x轴 y轴属于3D。
| 值 | 含义 |
| rotate | 设置旋转角度，需指定一个角度值（deg），政治顺时针，负值逆时针。 |
注意： rotateZ(20deg) 相当于 rotate(20deg) ，当然到了 3D 变换的时候，还能写：
rotate(x,x,x)
/* 沿着Z轴 顺时针方向转动30度 负值时逆时针方向转动 */
transform: rotateZ(30deg);
/* rotate只写一个值的时候默认就为绕着Z轴旋转 */
transform: rotate(30deg);
10.4 2D扭曲（了解）
2D扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际上开发几乎不用，了解即可，具体使用方法如下：
1、先给元素添加 转换属性 transform
2、编写 transform 的具体值，相关可选值如下：
| 值 | 含义 |
| skewX | 设置元素在水平方向曲，值为角度值，会将元素的左上角、右下角拉扯。 |
| skewY | 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。 |
| skew | 一个值代表 skewX，两个值分别代表：skewX、skewY |
10.5 多重变换
多个变换，可以同时使用一个 tranform 来编写。
transform : translate ( -50% , -50% ) rotate ( 45deg );
注意点：多重变换时，建议最后旋转。
/* 先向x轴，y轴方向位移100px，再缩放0.5倍 */
transform: translate(100px,100px) scale(0.5);
/* 先缩放0.5倍 ，再向x轴，y轴方向位移100px，*/
transform:scale(0.5) translate(100px,100px);
/*先旋转30度 再缩放0.5倍 ，再向x轴，y轴方向位移100px，*/
transform:rotate(30deg) scale(0.5) translate(100px,100px);
需要注意的是：旋转会使x轴，y轴的方向也跟着旋转，所以旋转最好放在最好。
10.6 变换原点
- 元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
- 修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
- 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%
1. transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自
身。 —— 默认值2. transform - origin: left top ，变换原点在元素的左上角 。3. transform - origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置。4. transform - origin: 0 ，只写一个值的时候，第二个值默认为 50% 。
/* 调整旋转的圆点，本身是围绕着中心进行旋转的
调整圆点为左上角 */
transform-origin: left top;
transform: rotate(30deg);
/* 通过像素值调整圆点 x轴50px y轴50px */
transform-origin: 50px 50px;
/* 通过百分比调整像素圆点，自身高度和宽度的百分比 */
transform-origin: 25% 25%;
/* 如果只写一个值，就是默认指定x轴，y轴居中的位置*/
transform-origin: left;
11、3D变换
11.1 开启3D空间
重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间！
使用 transform - style 开启 3D 空间，可选值如下：flat ： 让子元素位于此元素的二维平面内（ 2D 空间） —— 默认值preserve- 3d ： 让子元素位于此元素的三维空间内（ 3D 空间）
css"> .outer {width: 200px;height: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;}/* 沿x轴旋转30度 */
transform: rotateX(30deg);
11.2 设置景深
何为景深？--指定观察者于 z=0 平面的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。也就是说设置景深之后，就会有3d效果了。
使用 perspective 设置景深，可选值如下：
none ： 不指定透视 —— （默认值）长度值 ： 指定观察者距离 z=0 平面的距离，不允许负值。注意： perspective 设置给发生 3D 变换元素的 父元素！
/* 先给父元素设置景深 不能给负数，近大远小*/
perspective: 500px;
/* 再沿x轴旋转30度 */
transform: rotateX(30deg);
11.3 透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
使用 perspective-origin 设置观察者位置（透视点的位置），例如：
/* 相对坐标轴往右偏移 400px ， 往下偏移 300px （相当于人蹲下 300 像素，然后向右移动 400 像素看元素） */perspective-origin : 400px 300px ;
注意：通常情况下，我们不需要调整透视点位置。
/* 设置透视点的位置 默认是元素的正中央，其实可以理解为从什么方向看*/
perspective-origin: 50px 50px;
11.4 3D位移
3D位移是在 2D位移的基础上，可以让元素沿z轴位移，具体使用方式如下：
1、先给元素添加 转换属性 transform
2、编写 transform 的具体值，3D 相关可选值如下：
| 值 | 含义 |
| translateZ | 设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能 写百分比。 |
| translate3d | 第 1 个参数对应 x 轴，第 2 个参数对应 y 轴，第 3 个参数对应 z 轴，且均 不能省略。 |
11.5 3D旋转
3D旋转是在2D 旋转的基础上，可以让元素沿 x轴 和 y轴 旋转，具体使用方式如下：
1、先给元素添加转换属性 transform
2、编写transform 的具体值，3D相关可选值如下：
| 值 | 含义 |
| rotateX | 设置 x 轴旋转角度，需指定一个角度值 ( deg ) ，面对 x 轴正方向：正值顺时针，负 值逆时针。 |
| rotateY | 设置 y 轴旋转角度，需指定一个角度值 ( deg ) ，面对 y 轴正方向：正值顺时针，负 值逆时针。 |
| rotate3d | 前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。 例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度。 |
11.6 3D缩放
3D缩放是在2D的基础上，可以让元素沿z轴缩放，具体使用方式如下：
1、先给元素添加转换属性 transform
2、编写 transform 的具体值，3D相关可选值如下：
| 值 | 含义 |
| scaleZ | 设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。 |
| scale3d | 第 1 个参数对应 x 轴，第 2 个参数对应 y 轴，第 3 个参数对应 z 轴，参数不允许省略。 |
11.7 多重变换
多个变换，可以同时使用一个 transform 来编写。
transform : translateZ ( 100px ) scaleZ ( 3 ) rotateY ( 40deg );
注意点：多重变换时，建议最后旋转。
11.8 背部可见性
使用backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：
- visible ： 指定元素背面可见，允许显示正面的镜像。—— 默认值
- hidden ： 指定元素背面不可见
注意： backface-visibility 需要加在发生 3D 变换元素的自身上。
