一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

css transform

transform翻译成中文为“变形”，和其义一样，可以对dom中的块对象div、p等进行变形，让其可以旋转、扭曲、缩放、移动和 矩阵变形。可以实现不可思议的样式，如可以实现平行四边形、梯形等多边形，也可以实现水平垂直居中，做简单的屏幕适配，比如我 们项目中的下拉框组件等的下拉图标展开和关闭的翻转效果，结合animation实现一些动画效果等等一系列应用。

transform的属性值包含：

旋转 rotate、 扭曲 skew、 缩放 scale 移动 translate 矩阵变形 matrix 我们可以将这些属性值混合使用以空格隔开，Css渲染引擎会从做到右一次进行变形处理。

.content {
  width: 200px;
  height: 100px;
  transform: translateX(10px) translateY(10px) scale(1.5);
}

移动 translate

translate表示可以沿着对应xyz轴平移，默认从父dom的左上角向右x轴平移，向下y轴平移和向靠近你z轴平移，支持百分比，z轴不支持百分比，百分比的值对应当前dom大小的百分比,不是父dom的大小，translate系列提供translate(x, y)方法实现2D平面图xy轴平移，和translate3d(x,y,z)方法实现3D三维空间的xyz轴平移，也提供单独设置xyz轴平移translateX(x)， translateY(x)，translateZ(x)，也可以将translateX、translateY等进行拼接已空格隔开。

.content {
  width: 200px;
  height: 100px;
  transform: translate(20px, 30px); // x轴平移20px, y轴平移30px
  transform: translate(50%, 50%); // x轴平移当前dom宽度的50%大小, y轴平移当前dom高度的50%大小
  transform: translateX(20px); // x轴平移20px
  transform: translateZ(20px); // y轴平移20px
  transform: translate3d(20px, 20px, 20px); // x轴平移20px, y轴平移20px, z轴平移20px
  transform: translateY(20px); // z轴平移20px
}

旋转 rotate

rotate表示可以沿着xyz轴线将dom进行旋转，默认以当前dom的中心点为圆点，值单位是deg角度的意思,它也提供了对应的2D和3D方法以及单个设置的方法，rotate(z)方法是按照Z轴旋转，rotateX(x)、rotateY(y)、rotateZ(z)分别按照xyz轴旋转，rotate3d(x, y, z, value)是3d方法，参数表示从0,0,0坐标原点开始到x,y,z坐标的直线作为旋转轴顺时针旋转value度，rotate的旋转方向图如下。

.content {
  width: 200px;
  height: 100px;
  transform: rotate(45deg); // 默认为沿Z轴旋转，顺时针旋转45°， 赋值就是逆时针
  transform: rotateX(45deg); // 沿X轴旋转，顺时针旋转45°
  transform: rotateY(45deg); // 沿y轴旋转，顺时针旋转45°
  transform: rotateZ(45deg); // 沿z轴旋转，顺时针旋转45°
  transform: rotate3d(1, 1, 1, 45deg); // 沿这坐标1,1,1到原点0,0,0坐标的直线旋转顺时针旋转45°
}

缩放 scale

rotate可以让dom进行放大缩小，沿着xyz轴拉长缩短，提供scale(x, y)方法进行2D的缩放，y值可以没有，没有时采用的是x的值，1表示大小不变,2表示放大两倍，0就是不显示了。也提供单独设置xy轴放大的方法scaleX(x)、scaleY(y),也提供3d方法scale3d(x, y, z)。

.content {
  width: 200px;
  height: 100px;
  transform: scale(1); // 大小不变
  transform: scale(2); // xy轴方向放大2倍
  transform: scale(2, 1); // x轴放大2倍，y轴方向不变
  transform: scaleX(2); // x轴放大2倍
  transform: scaleY(2); // y轴放大2倍
  transform: scale3d(2, 2, 2); // xyz轴方向放大2倍
}

扭曲 skew

rotate是一种拉伸，按对应的方向根据对应的角度进行拉伸，不支持z轴的拉伸，会使得在对应方向上以一定角度扭曲元素上的每个点。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。提供2d方法skew(x, y)和单独的skewX(x), skewY(y)方法

.content {
  width: 200px;
  height: 100px;
  transform: skew(45deg, 0deg);
  transform: skewX(10deg);
  transform: skewY(10deg);
}

总结

transform其实是根据矩阵运算进行变形的，其中还提供了matrix和matrix3d方法，如果要掌握matrix方法要提前对3维和矩阵运算进行了解，在平常开发中基本用不到matrix方法，除非遇到特有的变形时可以用到。