CSS Transform 平移和旋转

CSS Transform 是一种强大的属性，可以用来控制 HTML 元素的位置、形状和方向。其中，平移和旋转是 CSS Transform 中最常用的操作之一。

平移

平移是将元素从其原始位置沿着 X 轴和 Y 轴移动。可以使用 CSS Transform 中的 translate() 函数实现元素的平移。

/* 将元素平移 50px 到右侧，200px 到下方 */
transform: translate(50px, 200px);

如果只需要在一个方向上进行平移，可以使用 translateX() 或 translateY() 函数。

/* 将元素向右平移 50px */
transform: translateX(50px);

/* 将元素向下平移 200px */
transform: translateY(200px);

此外，还可以使用百分比值作为参数进行平移。例如，将元素向页面底部的中央平移。

/* 将元素向下平移到页面底部的中央位置 */
transform: translateY(50%);

旋转

旋转是将元素绕着其中心点旋转。可以使用 CSS Transform 中的 rotate() 函数实现元素的旋转。

/* 将元素逆时针旋转 30 度 */
transform: rotate(-30deg);

旋转的角度可以使用度数和弧度两种单位来表示。注意，正值为顺时针旋转，负值为逆时针旋转。

有时候我们需要将元素沿着某个轴旋转，可以使用 rotateX()、rotateY() 和 rotateZ() 函数。其中，rotateX() 表示绕着 X 轴旋转，rotateY() 表示绕着 Y 轴旋转，rotateZ() 表示绕着 Z 轴旋转。

/* 将元素绕着 X 轴旋转 30 度 */
transform: rotateX(30deg);

/* 将元素绕着 Y 轴旋转 30 度 */
transform: rotateY(30deg);

/* 将元素绕着 Z 轴旋转 30 度 */
transform: rotateZ(30deg);

除了单个轴的旋转，还可以通过组合多个旋转函数实现元素的 3D 旋转。

/* 在 X、Y、Z 轴上分别旋转 30 度 */
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);

以上便是 CSS Transform 中平移和旋转操作的简介。使用这两个操作，可以实现丰富的动画效果和交互效果。