CSS transfrom属性与animation属性

一、transform属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
1、移动
基本语法：transform: translate(0px,0px);或者transform: translateX(0px);、transform: translateY(0px);。
transform: translate(0px,0px)：表示第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离；
transform: translateX(0px)、transform: translateY(0px)：分别表示水平方向与垂直方向上移动的距离。
2、缩放
基本语法：transform: scale(1)或者transform: scale(1, 1)、transform: scaleX(1)、transform: scaleY(1)。
transform: scale(1)：表示水平和垂直同时缩放该倍率；
transform: scale(1, 1)：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率；
transform: scaleX(1)、transform: scaleY(1)：分别表示水平方向和垂直方向上的缩放倍率。
3、旋转
基本语法：transform: rotate(90deg)。
rotate()里的值表示要旋转的角度，deg表示单位度。rotate默认是围绕旋转中心旋转。
可以用transform-origin:0px 0px;来改变旋转中心：
列如：