过渡
概念
css属性允许某个或多个属性，从一个状态改变到另一个状态的过程中，慢慢地、圆滑地发生改变。可以产生一定的动画效果。例如：将div从原本的left属性为0的状态改变到left为300的状态，中间过程可以慢慢地进行。### 语法
transition-property: css属性名称; /* 表示要产生过渡效果的css属性，多个属性使用逗号隔开，如果嫌麻烦，可以直接写all，表示所有属性 */
transition-duration: 数字s; /* 表示完成过渡效果需要的时长 */
transition-timing-function: 速度方式;
/*
linear 表示匀速
ease 逐渐减速 - 一开始比较快
ease-in 逐渐加速
ease-out 逐渐减速 - 一开始没有ease快
ease-in-out 先加速后减速
专门用于设计速度方式的贝塞尔曲线
分步骤动画
*/
transition-delay: 数字s; /* 表示延迟多少秒执行过渡效果 */
transition: 值；
transition的取值：是单一写法的4个值的组合，用空格隔开。第一个秒数表示过渡效果需要使用的时间，第二个秒数表示延迟多长时间后执行。通常情况下，我们在开发当中，只使用复合写法。
例：
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
transition-property: /* all */ border-radius,background-color,width;
transition-duration: 2s; /* 表示完成过渡效果需要的时长 */
transition-timing-function: linear; /* linear表示匀速 */
transition-delay: 0s;
/* transition: all 2s ease 0s; */
}
.box:hover{
width: 300px;
height: 100px;
border-radius: 50%;
background-color: #0f0;
}
</style>
<div class="box"></div>
效果：
注意：过渡属性如果放在hover中修饰，表示只有鼠标移入的时候才会有过渡效果，移出的时候就没有过渡效果了，如果要在鼠标移入和移出的时候都能有过渡效果，就需要将过渡属性修饰在标签样式中。因为hover中修饰的样式，只有鼠标移入的时候才会执行，移出就不会执行了。## 2d
2D概念
俗称2d变换，指的是基于2d平面的角度，让标签元素发生变化。例如，让盒子移动、让盒子缩放、让盒子旋转。。。
平移
平移是让盒子在水平方向或垂直方向进行移动。
语法：
transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translate(水平方向像素值, 垂直方向像素值); /* 复合写法 */
缩放
缩放指让盒子可以缩放或放大一定的倍数。
语法：
transform: scaleX(横向放大倍数);
transform: scaleY(纵向放大倍数);
transform: scale(倍数); /* 大于1的放大，小于1缩小 */
旋转
旋转指让盒子绕着x轴或y轴进行旋转。
语法：
transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotate(旋转的角度); /* 绕着盒子中心点旋转多少角度 */
transform-origin: x轴坐标 y轴坐标; /* 调整旋转的中心，可以使用像素值，可以使用关键字 */
backface-visibility: hidden; /* 设置旋转180度以后背面是否可见 */
typora-copy-images-to: media
3d
俗称3d变换，指基于3d立体的角度来设置盒子。例如，将盒子设置为立方体。3d的效果跟2d是一样的，有平移和旋转，不同点在于，2d只有x轴和y轴，3d会多一个z轴，用于表示立体。
3d的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2d效果，这就需要在设置3d变换效果之前，需要先设置景深：
perspective: 1200px; /* 在父元素中使用,设置景深 */
同时，我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：
perspective-origin: 50% 50%;
对于3d的效果来讲，同样具有平移和旋转，但因为平移和旋转同样适用于2d效果，所以我们还需要告诉浏览器当前场景是在3d效果下进行的：
transform-style：preserve-3d; /* 表示在3d空间中展示 */
旋转
旋转指让盒子绕着x轴或y轴进行旋转。
语法：
transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotateZ(旋转的角度); /* 绕着z轴旋转多少角度 */
平移
平移是让盒子在水平方向或垂直方向进行移动。
语法：
transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translateZ(像素值); /* z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 */
transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); /* 复合写法 */
