# 新特性

# 2D 转换 transform

/* 移动: */
transform: translate(x, y);
/* 水平移动 */
transform: translateX();
/* 竖直移动 */
transform: translateY();
/* 设置转动点或缩放点,默认50%,50%  可设定方位名词top center bottom left right */
transform-origin: x y;
/* 设置二维旋转,正值为顺时针 */
transform: rotate(deg);
/* 倾斜,和Y轴夹角(逆时针),和X轴夹角(顺时针) */
transform: skew(deg, deg);
/* 设置二维缩放,可以只填一个参数则等比例放缩,大于1放大,小于1缩小 */
transform: scale(x, y);
/* 综合写法: 注意这个写法会有执行顺序的问题,动画会按顺序执行,坐标参考canvas*/
transform: translate() rotate() scale();

# 3D 转换 transform

/* 容器透视高度 500px,给容器设置景深 */
perspective: 500px;
/* 子元素是否开启立体空间,给容器设置 */
transform-style: flat | preserve-3d;
/* Z 方向移动 */
transform: translateZ();
/* 三个参数不能缺省 */
transform: translate3d(x, y, z);
/* 左视图 绕X轴逆时针旋转 45deg */
transform: rotateX(45deg);
/* 俯视图 绕Y轴逆时针旋转 45deg */
transform: rotateY(45deg);
/* 沿着自定义轴旋转,(x,y,z)为方向向量 */
transform: rotate3d(x, y, z, deg);
/* 综合写法: 注意执行顺序问题,有时先旋转后移动可以简化计算 */
transform: translate3d() rotate3d();
/* 矩阵 */
transform: matrix(1, 0, 0, 1, 30, 30);
/* 实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px); */

# 过渡 transition

transition: <style>/all | duration | timing-function | delay;
/* 指定某个特定样式,或者所有前后不一致的样式进行过度  */

# 动画 animation

/* @keyframes 基本写法*/
@keyframes name {
  0% {
  }
  50% {
  }
  100% {
  }
}
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode;
/* animation使用方法*/
/* name 动画名,调用动画,必须  */
/* duration 动画周期,必须  */
/* timing-function 动画速度时间关系曲线,默认 ease */
/* delay 动画开局延迟,默认 0  */
/* interation-count 动画反复次数,默认 1  */
/* direction 规定动画在下周期是否逆向,默认 normal */
/* fill-mode 规定动画结束后状态,保持当前 forwards,默认回到起点 backwards */
animation-play-state: running | paused;
/* 规定动画是否正在运行或暂停 */

# 滤镜 filter

filter: none;
/* 默认值,没有效果 */
filter: blur(px);
/* 给图像设置高斯模糊 */
filter: brightness(%);
/* 给图片应用一种线性乘法 */
filter: contrast(%);
/* 调整图像的对比度 */
filter: grayscale(%);
/* 将图像转换为灰度图像 */
filter: hue-rotate(deg);
/* 给图像应用色相旋转 */
filter: invert(%);
/* 反转输入图像 */