定义2D转换中的移动，沿着 X 和 Y 轴移动元素；transform 的位移不会影响其他元素的位置

// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽；
// transform 对行内标签没有效果

该CSS样式常搭配 :hover 与 transition 一起使用

transform: none|transform-functions; //不进行转换 或 设置转换的方式函数

transform 方法

值	描述
none	定义不进行转换。
matrix(n*6)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n*16)	定义 3D 转换，使用 16 个值的 4×4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。(单位deg)
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。(单位deg)
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。(单位deg)
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

transform 使元素居中

 /*元素定位到父级一半后，减去自身的一半大小*/
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);

transform:translate 使元素平移

/* X轴 正数为右移，负数为左移动*/
transform: translateX(-10px);

transform:rotate 使元素2D旋转

/* 旋转角度 单位deg 正数为顺时针 负数为逆时针*/
transform: rotate(45deg);

transform-origin 设置2D转换中心点

 /* 设置中心点后 单位（xp、方位、 %） 将围绕该点作为旋转中心 */
transform-origin: left bottom;

transform:scale(x,y) 2D转换放大与缩小

/* 该操作不会影响其他盒子位置 1>的值为缩小 <1的值为放大 1为不变化 */
/* sacle缩放的最大优势 可以设置转换中心点缩放 */
transform: scale(1.5); /* 该参数表示为长宽等比放大 1.5倍*/

transform:scale 搭配中心点 将呈现出 不同方位 拉伸 或 缩放 的动画的效果

/* origin决定了动画的朝向，向左拉伸2倍自身宽度 */
transform-origin: right;
transform: scale(2, 1);

transform 可执行多个动画转换 但需注意书写顺序

/* 该顺序决定了转换的效果 在位移的途中进行了旋转*/
/* 尽量将位移放在最前面 */
transform: translate(200px,0) rotate(1000deg);

附上案例：图片放大案例