先把官方的搬过来
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
div{
transform: none //不进行转换
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) //定义 2D 转换，使用六个值的矩阵。
transform: translate(12px, 50%) //定义 2D 转换。
transform: translateX(2em) //定义转换，只是用 X 轴的值。
transform: translateY(3in) //定义转换，只是用 Y 轴的值。 ()
transform: scale(2, 0.5) // 定义 2D 缩放转换。
transform: scaleX(2) // 通过设置 X 轴的值来定义缩放转换。
transform: scaleY(0.5) // 通过设置 X 轴的值来定义缩放转换。
transform: rotate(0.5turn) //定义 2D 旋转，在参数中规定角度
transform: skewX(30deg) //定义沿着 X 2D 倾斜转换。
transform: skewY(1.07rad) //定义沿着Y 轴的 2D 倾斜转换。
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) // 定义 3D 转换，使用 16 个值的 4x4 矩阵。
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)
transform: translateX(10px) rotate(10deg) translateY(5px)
}
一、旋转rotate
rotate() ：通过指定的角度参数对原元素指定一个 2D rotation （2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设 置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
二、移动translate
移动translate我们分为三种情况：
translate(x,y)水平方向和垂直方向同时偏移（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向偏移（X轴移动）；
translateY(Y)仅垂直方向偏移（Y轴移动）
三、缩放scale
缩放scale和移动translate是极其相似，他也具有三种情况：
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；
scaleX(x)元素仅水平方向缩放（X轴缩放）；
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小，负数不变
四、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值 进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
