CSS中的transform、transition和animation基本用法

transform

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
注意： inline元素是不支持 transform，需要编程block

常用的功能属性

• 位移 translate
• 缩放 scale
• 旋转 rotate

位移 translate 常用写法

• translate( <length-percentage> , <length-percentage>? )
• translateX( <length-percentage> )
• translateY( <length-percentage> )
• translateZ( <length> 且父容器要有perspective属性)
• translate3d(x,y,z)

经常使用 translate(-50%,-50%)配合定位来实现元素的水平垂直居中

缩放 scale 常用写法

• scale( <number、> , <number>? )
• scaleX( <number> )
• scaleY( <number> )

旋转 rotate 常用用法