变形 transform的注意点

关于移动和旋转

如果需要移动，也需要旋转

 transform: translate(-50%, -50%) rotate(360deg);

一定先写移动，后写旋转, css属性书写顺序影响代码执行。

关于缩放

他是用中心点来进行缩放的，同样他不会影响其他的盒子。

关于渐变

background-image: linear-gradient(to 方位名词/角度, yellow, red, green, pink);


background-image: radial-gradient
	(半径大小 at 圆心位置/水平位置 垂直方向,
			颜色1 终点位置,
			颜色2 终点位置,
			...);

关于盒子居中

/* 第一种 */
/* 定位，子绝父相，加上transform: translate(-50%,-50%)，向左和上移动自身的一半 */

/* 第二种 */
/* 弹性盒子，主轴和侧轴均设置居中 */

/* 第三种 */
/* 定位，子绝父相，加上margin,需要确定子盒子宽高 */

/* 第四种 */
/* 定位，子绝父相，使子盒子脱离标准流，然后margin */

关于透视的bug

透视中心点默认在盒子中间,我们的内容需要放在盒子中间,原因是如果不放在盒子中间,使用透视会导致内容发生倾斜

动画

/* 定义动画 */
@keyframes 名称 {
    0% / from {
        ...
    }
    30% {
        
    }
    ...
    100% / to {
        ...
    }
}
/* 调用动画，谁动给谁（类似过渡） */
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；