transform:改变
translate(200px,0) 平移
x y
scale(2,2) 缩放
x y
可缩放倍数,可以实现水平垂直翻转
rotate(45deg) 旋转
角度
skew(45deg,45deg) 斜切
角度 角度
修改旋转中心
transform-origin:center bottom
位置 位置
perspective(800px) 视距（透视）
transform-style:preserve-3d; 真正的3D
给父级添加
注意：
1. transform-style: preserve-3d; 不能继承
2.初始值哪怕是0也要加
transition:1s all/属性值 ease
过度 时间 要变换的样式 运动形式
backface-visibility: hidden;
隐藏被旋转的 div 元素的背面：
滤镜
-webkit-filter:blur(px);
1.图像高斯模糊
-webkit-filter:blur(4px);
范围随便写就行，记得加px
- 图片进行棕褐色处理
-webkit-filter:sepia(1);
处理范围是0-1或者0%-100% - 图片灰色处理
-webkit-filter:grayscale(1);
范围是 0-1或者0%-100% - 图片反色处理
-webkit-filter:invert(1);
范围是 0-1或者0%-100% - 图像饱和度调节
-webkit-filter:saturate(30);
范围是 取值范围>=0数字或百分比 1为无效果，0为灰度图 - 图像对比度调节
-webkit-filter:contrast(90);
取值范围>=0数字或百分比 1为无效果 - 图像亮度调节
-webkit-filter:brightness(3);
取值范围>=0数字或百分比 1为无效果 - 图像色相旋转
-webkit-filter:hue-rotate(300deg);
取值范围0deg-365deg, 0默认值，为无效果 - 阴影滤镜
-webkit-filter:drop-shadow(5px 5px 3px #333);
animation***重点
定义动画
@keyframes 动画名{
0% {
//要变化的样式
}
54%{
}
100%{
}
}
调用
animation:动画执行时间 4s/4000ms 动画名 动画形式 ease linear 动画次数 infinite/356
省略号：
单行省略
width:200px
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行省略
-webkit-line-clamp
文字对齐方向
unicode-bidi: bidi-override;
direction: rtl;/ltr
