css transform变换 translate rotate scale skew | transiton

MDN CSS

transform

只能转换由盒模型定位的元素

translate() / translate3d() 平移

translateX()
translateY()
translateZ()

rotate() / rotate3d() 旋转

rotateX()
rotateY()
rotateZ()

单轴旋转180deg可实现镜像翻转

scale() / scale3d 缩放

scaleX()
scaleY()
scaleZ()

skew() 倾斜

水平方向倾斜角度
竖直方向倾斜角度

translate 平移变换

scale 缩放变换

transition 过渡

transition: [none/all/命名CSS属性] [过渡函数] [过渡时间] [transition-delay]

transition-delay 过渡迟延 可实现一些有序的动画