一、CSS transform 属性的介绍
通过修改CSS视觉格式化模型的坐标空间，CSS 的 transform 属性允许使用者平移，旋转，缩放或倾斜给定元素。
transform 属性可以指定为关键字值 none 或一至多个<transform-function>（transform 函数）值。
举例
transform 属性指定为关键字值 none ：
transform: none
transform 属性指定为一至多个<transform-function>（transform 函数）值：
/* transform: <transform-function> */
transform: scale(0.6) translate(-.9em, .2em) rotateX(360deg);
二、transform 函数
在 CSS3 中，transform 函数包括：translate、rotate、scale、skew 与 matrix。
translate ——平移
平移分为 translateX()、translateY()、translateZ()，表示在X、Y、Z轴上移动，也有2D移动的 translate(,) 可以同时指定在 X 与 Y 轴上的移动量，以及3D移动的 translate3d(,,) 可以同时指定在三条轴上的移动量。
移动量一般用长度来指定，如 10px 。也可以通过百分比来指定，其参考值是 transform 作用元素的尺寸。
transform: translate(20px, 30px)
translate 可以用于绝对定位下的元素居中。示例如下：
.wrapper {
position: absolute;
top: 50%;
left: 50%;
/*
此时元素左上角居中，故要将元素向左平移宽度的一半、向上平移高度的一半，才能使元素的中心居中；
由于坐标系中，原点右侧为 X 轴正轴，原点下方为 Y 轴正轴，故此处取负值
*/
transform: translate(-50%, -50%);
}
rotate ——旋转
rotate()为 2D 旋转，其参数值为角度，如 45deg ，默认为顺时针旋转，若角度取负数则反向旋转。
3D 旋转分为按 X、Y、Z 轴旋转，对应的函数即 rotateX()、rotateY()与rotateZ()。
transform: rotateX(45deg)
scale ——缩放
scale的参数值 n 为缩放的比例，n 为正数表示放大 n 被，n 为负数表示缩小至 |n| 倍，基数为 1 。
scale()定义 2D 缩放，scale3d(x,y,z)定义 3D 缩放。scaleX()、scaleY()、scaleZ()分别表示单独在 X、Y、Z 轴上缩放当前元素。
transform: scale(2.0)
skew ——倾斜
skew(,)为 2D 旋转，其参数值为角度，如 30deg 。
3D 旋转分为按 X、Y 轴旋转，对应的函数即skewX()与skewY()。
transform: skewX(-30deg)
三、使用 transform 制作一个动态 LOGO
效果图
实现过程
外部wrapper（站牌的边框）居中显示。
.wrapper {
background-color: rgb(155, 27, 27);
background-clip: content-box;
border: 30px double white;
cursor: pointer;
padding: 1%;
/* 使用flex布局，操纵其子元素居中 */
display: flex;
justify-content: center;
align-items: center;
/* 该元素居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
wrapper（站牌）内有 5 个 strong 标签，从左到右依次包装了 9 3 / 4 Station 这个五个单词。
.wrapper strong {
/* strong为行级元素，需要更改为块级元素，否则无动画效果 */
display: inline-block;
margin: .2em;
font-size: 3em;
color: whitesmoke;
/* 因为后续要对这 5 个 strong 标签（即站牌上的文字）进行 transform，故此处添加 transition ，即过渡时间，让元素转变形态的过程能展现出来 */
transition: 1s;
}
当鼠标移过外层 wrapper（站牌）时，这 5 个单词将发生变化。
.wrapper:hover strong:nth-of-type(1) {
/* 9 放大至 1.4 倍，并向右移动，靠近 3 / 4 */
transform: scale(1.4) translateX(.6em);
}
.wrapper:hover strong:nth-of-type(2) {
/* 3 缩小并向右上方移动，移动至 / 之上，成为分子 */
transform: scale(0.6) translate(.9em, -.6em);
}
.wrapper:hover strong:nth-of-type(3) {
/* / 缩小并在 Y 轴上适当移动 */
transform: scale(0.8) translateY(-.2em);
}
.wrapper:hover strong:nth-of-type(4) {
/* 4 缩小并向左下方移动，移动至 / 之下，成为分母 */
transform: scale(0.6) translate(-.9em, .2em);
}
.wrapper:hover strong:nth-of-type(5) {
/* Station 绕 X 轴转动一圈 */
transform: rotateX(360deg);
}
四、使用 transform 的注意事项
不要忘记原 transform 函数
Q：为某元素 hover 样式中添加 transform 效果后，原效果消失
A：在为元素的 hover 样式添加 transform 效果时，不要忘记把原效果加上
例如：
.wrapper {
transform: translate(-50%, -50%)
}
.wrapper:hover {
transform: translate(-50%, -50%) scaleX(2)
}
rotate 与 translate 的同时使用
Q：同时使用 rotate 与 translate 后，发现平移的效果与预期不同
A：rotate 在旋转元素时，会将坐标系一起旋转。以旋转 90 度为例，旋转后的 x 轴从原先的水平方向旋转为垂直方向。
例如：现有三个元素，施加 transform 之前叠加在一起。
.before {
color: black;
}
.after1 {
color: darkmagenta;
}
.after2 {
color: gold;
}
现对三者各添加 transform 函数如下：
/* 元素 color 为黑色 */
.wrapper:hover .before {
transform: rotate(90deg);
z-index: -1;
}
/* 元素 color 为深紫红 */
.wrapper:hover .after1 {
transform: translateX(100px) rotate(90deg);
}
/* 元素 color 为金色 */
.wrapper:hover .after2 {
transform: rotate(90deg) translateX(100px);
}
以只旋转未平移的黑色元素作为参考点，可以观察到，深紫红的元素先平移后旋转，则相比黑色元素确实向左平移了 100px。这说明平移时元素的 x 轴依然是水平方向的。而金色元素虽同样使用了 translateX(100px) 函数，却是在垂直方向与参照点黑色相距 100px，水平上处于同一位置。由此可见，由于金色元素的平移发生在旋转之后，坐标系也发生了旋转，x 轴正轴从原先的水平向右，旋转了 90 度，变为了垂直向下。故金色元素最终垂直向下偏移了 100px 。
所以，在同时使用 rotate 与 translate 时，应该将 rotate 置于之后，以免产生预期之外的结果。
叠加生效而非覆盖
应注意，上述提到的 translate、rotate、scale 等本质为函数。在同一个 transform 属性中同时使用多个相同函数时，会发生叠加效果，而不是后面的覆盖前面的。
例如：
{ transform: translateX(100px) translateX(-100px); }
则作用的元素最终不会发生任何偏移，因为先向 x 正方向平移了 100px ，又朝负方向平移了 100px ，则最终仍回到原位置。
参考
| 链接 |
|---|
| MDN Web Docs - transform |
| CSS3 transform 属性 |