过渡

基本概念：
transition提供了一种在更改css属性时控制动画速度的方法，可以让这个属性在指定时间内完成效果，而不是立即生效。

transition-property

设置过渡的属性名。
语法：transition-property：css属性名；
注意：
仅仅设置属性名是没有效果的，需要配合过渡的执行时长一起使用。
多个属性名同时过渡时，中间使用逗号隔开，属性名和执行时长一一对应。

transition-duration

设置过渡的执行时长。
语法：transition-duration:时间
需要带单位，ms代表毫秒，s代表秒，1s=1000ms
注意：
过渡属性名多于过渡时长的个数，时长重复一遍，一一对应。

transition-timing-function

设置过渡的执行速率。
属性值：
ease：默认值，以低速开始，然后变快，在结束前变慢。
linear：匀速。
ease-in：以低速开始。
ease-out：以低速结束。
ease-in-out：以低速开始和结束。
cubic-bezier()：贝塞尔曲线。

贝塞尔曲线（自定义速度曲线）

概念：是一种用于构建二维图片的速度曲线，本质上是一个数学曲线。
作用：在css中，贝塞尔曲线可以控制动画的速率。
语法：cubic-bezier（x1，y1，x2，y2）
这两个坐标，决定了速度曲线的形状，不同的形状所对应的速度不一样，可以为负数。
贝塞尔曲线官网：https://cubic-bezier.com/#.17.67.83.67

transition-delay

设置过渡的延迟时长，过渡延迟多久才开始执行。
语法：transition-delay:时间；
默认为0s。

transition

复合属性
语法：
transition：属性名执行时长延迟时长执行速率；
多个属性名同时使用，中间使用逗号隔开。
transition:属性名1 执行时长延迟时长执行速率；
属性名2 执行时长延迟时长执行速率；
注意：并不是所有的属性都可以设置过渡，比如display属性。

2D转换

css3提供了transform属性来处理盒子（html标签）的转换，包括位移、旋转、缩放、倾斜等操作。
2D转换一般要配合transition过渡一起使用。
注意：都不会影响其他盒子。

位移

可以让盒子沿着x轴或y轴进行移动，不会影响其他盒子。
语法：

沿着x轴和y轴进行移动；
transform:translate(x轴移动量，y轴移动量);
沿着x轴移动；
transform:translate(x轴移动量);
transform:translateX(x轴移动量);
沿着y轴移动;
transform:translateY(y轴移动量);

注意：盒子是以后来的位置为起点，进行移动。

旋转（rotate）

可以让盒子进行旋转。
语法：

围绕着盒子的中心点进行旋转，正值是顺时针方向，负值是逆时针方向旋转。
transform:rotate(角度);
围绕着x轴进行旋转；
transform:rotateX(角度);
围绕着y轴进行旋转；
transform:rotateY(角度);

注意：盒子没有厚度，如果围绕x轴或y轴旋转90deg，盒子与视线平行，看不见盒子，从页面中消失。

缩放（scale）

可以让盒子进行放大和缩小。
语法：

同时控制盒子的宽度和高度进行缩放。
transform:scale(宽度的倍数，高度的倍数)；
将盒子等比例缩放。
transform:scale(倍数)；

注意：
倍数为0，盒子消失
倍数为1，参考盒子原来的大小
倍数为0-1，盒子缩小
倍数大于1，盒子放大
盒子缩小和放大都是参考盒子的中心点进行缩放。

倾斜（skew）

可以让盒子沿着x轴或y轴进行倾斜转换。
语法：

沿着x轴进行倾斜；
transform:skew(角度)；
transform:skewX(角度)；
沿着y轴进行倾斜；
transform:skewY(角度)；

skewX：沿着x轴倾斜，角度越大，越靠近x轴，当角度为90deg时，会和x轴平行，消失不见。
skewY：沿着y轴倾斜，角度越大，越靠近y轴，当角度为90deg时，会和y轴平行，消失不见。

转换基点

基点：是css 2D转换时的参考。
可以通过transform-origin设置转换的参考点位置。
语法：

transform-origin:x,y;
x代表x轴上的位置，y代表y轴上的位置。

单词：left right center top bottom 两两搭配使用。
默认值为center center，默认在盒子的中心点。
固定像素：左上角相当于0px 0px；
百分比：50% 50% 相当于center center
注意：
（1）针对缩放和旋转，因为都是默认参考盒子的中心点进行变换，所以改变了转化基点位置，缩放和旋转会受影响。
（2）针对位移来说，因为位移是参考盒子原来的位置进行移动，所以改变转换基点的位置不会影响位置的变换。
（3）如果需要设置转换基点，需在未改变样式时设置基点的位置，因为默认基点在center center，如果在改变样式时设置基点的位置，基点会从center center变为指定位置，样式效果会错乱。

组合转换

将多种2D转换组合在一起使用，中间使用空格隔开。
语法：
transform:translate(200px,300px) rotate(45deg) scale(2);
注意：旋转会改变坐标轴的方向。

SASS

原生css的不便
（1）书写重复的选择器；
（2）修改css属性不方便，一处修改，每处都需要修改；
（3）css代码重复，比如水平垂直居中，ul三件套。
基本概念
SASS是一个css预处理器，可以为网站启用可定义，可管理和可重用的样式表。SASS是一种动态样式表语言，扩展了css的功能。
css预处理是一种脚本语言，可扩展css并将其编译为常规css语法，以便浏览器进行解析。
SASS对css进行扩展，通过它提供嵌套、变量、混合等操作，加快编写css的效率。
目的：
极大提升编写css代码的效率。
官网：
https://www.sass.hk/

嵌套

概念：SASS支持选择器里面嵌套子选择器。
作用：让SASS代码对应css代码，层级结构清晰明了，不会出现父子标签之间权重。
语法：

父选择器 {
          父选择器的css代码；
          css属性：属性值；
          子选择器 {
                    子选择器的css代码；
                    子选择器 {
                              子选择器的css代码；
                              }
                    }
          }

变量

概念：变量可以看作一个存储数据的容器，可以在代码中重复使用。
语法：需要先在页面开始定义后才能使用。
变量名命名规范：
（1）变量名可以包含数字、字母、-和_;
（2）不能以数字开头；
（3）多个单词之间建议使用-隔开；
注意：变量可以进行数学运算。

3D转换

3D转换基于css完成3D设计。
在css中3D其实是2D的一种补充，在2D屏幕的基础上，新增了z轴，形成了三维坐标系。

三维坐标系

概念：在x，y轴基础上新增z轴，构成了三维坐标系。
在css中三维坐标系，x轴的正方向是水平向右，y轴正方向是垂直向下，z轴的正方向是垂直屏幕向外。
左手系统：食指水平向右代表x轴正方向，中指垂直向下代表y轴的正方向，大拇指垂直x轴和y轴指向屏幕外面，代表z轴。
有了三维坐标系，我们可以用（x，y，z）代表三维空间的任意一点。

景深

概念：在摄像中，景深是指相机对焦点前后的清晰的成像范围，即镜头和物体之间的距离。
在开发中，我们将景深转化为当前物体在z轴上的距离。
作用：通过景深来设置盒子和屏幕之间的距离，景深越大，盒子和屏幕之间的距离越远，景深越小，盒子和屏幕之间的距离越近。（一旦设置景深，物体在运动过程中就可以实现近大远小的效果）
语法：perspective：像素值；
特点：
（1）景深是给父元素设置的，子元素会以3D的形式呈现。
（2）景深越大，3D效果越小，景深越小，3D效果越明显;
（3）景深是搭配3D转换一起使用的。

位移

可以让盒子在3D空间中进行移动。
语法：

沿着x轴进行移动
transform:translateX(x);
沿着y轴进行移动
transform:translateY(y);
沿着z轴进行移动，会出现近大远小效果
transform:translateZ(z);
同时控制三条轴位移
transform:translate3d(x，y，z);

缩放

可以让盒子放大或缩小；
语法：

沿着x轴方向进行缩放，宽度的缩放
transform:scaleX(缩放比例)；
沿着y轴方向进行缩放，高度的缩放
transform:scaleY(缩放比例)；
沿着z轴方向进行缩放，看不见效果
transform:scaleZ(缩放比例)；
同时控制三条轴上的缩放比例
transform:scale(x,y,z);

旋转

可以让盒子进行旋转，先确定旋转轴的方向，再设置旋转角度。
语法：

围绕着x轴进行旋转
transform:rotateX(角度)；
围绕着y轴进行旋转
transform:rotateY(角度)；
围绕着z轴进行旋转
transform:rotateZ(角度)；
围绕着自定义轴进行旋转
transform:rotate3d(x,y,z,角度)；
(x,y,z)确定三维坐标系中一个点
旋转轴：坐标原点到指定的点（x，y，z）的连线就是旋转轴的方向

灭点

在动画中是指视线的消失点；
通过perspective-origin设置视线的灭点，改变观察者的观察位置。
语法：

perspective-origin:x轴 y轴；
默认在舞台的中心点：center center；
单词：left right center top bottom 两两搭配使用
像素：0px 0px 相当于舞台的左上角
百分比：50% 50% 相当于center center

注意：
这个属性设置在舞台大盒子上，就是设置在设置景深的盒子上。
如果元素在舞台正中心并且灭点在中心点，看元素默认是对称的。

transform-style

概念：指嵌套的元素如何在3D空间中显示，定义3D图形如何进行显示，是在2D平面上显示，还是在3D空间中展示。
取值：float：默认值，代表其子元素在2D平面显示。
preserve-3d:代表其子元素以3D形式显示。
语法：transform-style：float | preserve-3d；
注意：设置在父元素上，控制里面的子元素以什么方式显示在页面上，注意这个父元素不一定是设置景深的盒子。
应用场景：实现页面中3D立体效果。

CSS过渡

过渡