transition和transform的相关知识

transition

功能：实现元素不同状态之间的平滑过渡。
之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间

数值型的属性才可以设置过渡。
width,height,color,font-size

transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。

transition-duration 完成时间：单位是s/ms。

transition-timing-function 运动曲线：

1. linear 匀速
2. ease 减速
3. ease-in 加速
4. ease-in-out 先加速后减速

transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。

transform

1.2D位移transform: translate(x,y);
x表示水平方向上的偏移量，向右为正，向左为负；
y表示垂直方向上的偏移量，向上为负，向下为正。
参数值：

1. px
2. 百分比。盒子本身的宽高*百分比

2. 2D转换缩放 transform:scale(x,y)
格式：
transform:scale(x,y)
x表示水平方向的缩放倍数
y垂直方向的缩放倍数
取值：大于1表示放大，小于1缩小。

3.倾斜transform:skew(x,y）
x表示水平倾斜角度；
y表示垂直倾斜角度。
单位：deg 角度
正值：顺时针，负值：逆时针。

4 .让盒子进行旋转transform: rotate(x);
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。
transform 可以书写多个2D转换，中间用空格隔开。
当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。

设置旋转的中心点 transform-origin: x;

属性值x：
1.px
2.英文（left center right top bottom）
3.百分比 : 百分比是按照自身宽高*百分比计算的。
只写一个值，第二值默认为center。

5.3D旋转 transform: rotate3d(x,y,z);

• x表示沿x轴进行旋转；
  transform: rotateX(180deg);表示沿x轴顺时针旋转180度；
• y表示沿y轴进行旋转；
  transform: rotateY(180deg);表示沿y轴顺时针旋转180度；
• z表示沿z轴进行旋转。
  transform: rotateZ(180deg);表示沿z轴顺时针旋转180度；

perspective: 110px;
透视：加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。

backface-visibility: hidden;
当盒子旋转过背面时，隐藏