常用属性

scale 缩放
rotate 旋转
translate 移动
skew 倾斜

经验：

一般在使用translate时，需要在本身上添加transiton 过渡来使效果平滑。

transiton:all time[s];
inline元素无法使用transform属性

translate 移动

写法：

translate( <长度-百分比> , <长度-百分比>? )  //?号表示可选
transform:translate(20%)
transform:translate(20%,100px)  //x轴移动自身的20%距离，y轴移动100px
transform:translateX(<长度-百分比)  //x轴
transform:translateY(<长度-百分比)  //y轴
transform:translateZ(<length>)  //需要在父盒子上加透视perspective 
transform:translate3D(x,y,z)  //3d效果下

经验：

使用translate时，记得给盒子加定位
translate(50%,50%)可以给盒子做居中效果，里面的百分比是自身宽度的百分比，所以可以配合left:50%使用

scale 缩放

写法：

<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )

不要写单位

rotate 旋转

rotate(45deg)
rotateX()
rotateY()
rotateZ()
rotate3D()

默认旋转是以中心点旋转，可以通过设置transform-origin来设置旋转点

transform多重组合

transform:translate(20px,100px) rotate(45deg) scale(1)

建议translate属性放在前面

效果消失 transform:none

transition 过渡

经常和transform组合使用，作用是补充transform的突兀效果，补充中间帧

写法

transiton:属性名时间 [方式延迟时间]

题外话

不是所有属性都可以用transiton，比如：

display:block => display:none

可以用visibility:hidden => visible

动画 animation

定义动画

@keyframes 动画名{
              0%{}
              50%{}
              ...
              100%{}
			}

使用动画

在使用的盒子内写css:

animation:时长速度曲线延迟次数方向填充模式是否暂停动画名

写给自己看的transform不完整介绍