转换可以简单理解为变形

①、格式：transform：trabslate（x,y）；

②、优点：不会影响其他元素的位置，类似于定位

③、x，y参数可以用%，50%就是移动盒子自身宽或高的一半

④、对于行内元素是无效的

1、格式：transform：rotate（度数）度数单位为deg

2、旋转中心点 transform-origin：x y；（xy中间是用空格隔开的）

①、默认旋转的中心点是元素的中心点（50%，50%）

②、也可以给x y设置像素或者方位名词（top right bottom left center）

1、格式：transform：scale（x，y） 不能跟单位

注：括号里面只有一个数时，是等比例缩放

2、优势：不会影响其他盒子，而且可以设置缩放中心点

1、格式：transform：translate（）空格 rotate（） 空格 scale（）

注：同时有位移和其他属性时，应先位移，因为先旋转会改变坐标轴方向

@keyframes（类似定义类选择器） 动画名称 {       0% { transform：translatex（）}     100%{transofrm：translatex（）}（0%-100% 这一过程叫做动画序列） }

用法：

在要使用的选择器里{  animation-name：动画名称(调用动画) animation-duration：持续时间（持续时间） }

注：①、可以做多个状态的动画  keyframe（关键帧）        ②、里面的百分比是要整数        ③、里面的百分比就是 总的时间（持续时间）的划分

①、anomation-timing-function：ease 运动曲线

linear 匀速           ease 默认 低速开始-加快-结束前减速      ease-in 低速开始     ease-out 低速结束

ease-in-out 低速开始和结束      steps（）间隔步长（常用来做类似火柴人的动画）

②、animation-delay：时间  何时开始

③、animation-iteration-count：infinite  重复的次数 

解释：interation 重复的      conut 次数     infinite 无限

④、animation-direction：alternate； 是否反向播放

默认为 normal 是      如果想要反向，就写 alternate

⑤、animationn-fill-mode：backwards； 动画结束后的状态

默认是 backwards 回到起始状态         forwards 是留在结束状态

⑥、animation-play-state：paused 动画运动状态

默认running     paused停止             一般配合伪类选择器 如：hover 使用 

①、animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态（中间都是以空格隔开）

注：前面两个属性不能省

②、一个元素可以添加多个动画，但是要以逗号分隔

backface-visibility：hidden 隐藏旋转元素的背面 定义：当元素不面向屏幕时是否可见

①、translateZ 后面的单位一般跟px

②、简写：transform：translate3d（x，y，z）x，y，z不能省略，没有就写0

①、视距：人的眼睛到屏幕的距离

②、视距越大，在电脑平面成像越大，越远成像越小

③、透视的单位是像素

④、透视写在被观察元素的父盒子上面

3D旋转可以让元素在三维平面内沿x,y,z轴或自定义轴旋转

①、transfrom-style（控制子元素是否开启3d空间）

②、transform-style:flat 默认的，不开启    transform-style：preserve-3d  开启

③、代码写给父级，但是影响的是子盒子