设置旋转中心点#

默认情况下，元素围绕自身中心旋转。

可以使用 transform-origin 修改旋转中心。

1
.box {
2
  transform-origin: center center; /* 默认中心 */
3
  transform: rotate(45deg);
4
}

常见属性值：

注意：transform-origin 不仅影响旋转，也会影响缩放、斜切等变形效果。

缩放与 width、height 的区别#

1
/* 修改元素布局尺寸 */
2
.box {
3
  width: 200px;
4
  height: 200px;
5
}
6

7
/* 仅改变视觉大小 */
8
.box {
9
  width: 100px;
10
  height: 100px;
11
  transform: scale(2);
12
}

两种方法视觉上都可能得到 200px × 200px 的盒子，但它们有本质区别：

• width、height：改变元素布局尺寸，可能影响其他元素的排列。
• scale()：不会改变元素原有的布局占位。

实际应用： 图片悬停放大、按钮交互、卡片放大动画等。

skewX 与 skewY 的区别#

• skewX()：改变元素不同高度处的水平偏移，使左右边倾斜。
• skewY()：改变元素不同水平位置处的垂直偏移，使上下边倾斜。

注意：skew() 是斜切，不是旋转。斜切通常会改变元素原有的角度和形状，而旋转会保持其形状不变。

实际应用： 倾斜按钮背景、装饰卡片、几何图形、特殊视觉效果等。

1. translate 百分比的计算规则#

这一点非常重要。

1
.box {
2
  width: 200px;
3
  height: 100px;
4

5
  transform: translate(50%, 50%);
6
}

结果：

• 水平位移：200 × 50% = 100px。
• 垂直位移：100 × 50% = 50px。

translate 的百分比通常是相对于元素自身的尺寸，而不是父元素。 这里讨论的是普通 HTML 元素默认的变形参考盒。

使用 translate 实现绝对定位居中#

1
.parent {
2
  position: relative;
3
  width: 500px;
4
  height: 500px;
5
}
6

7
.child {
8
  position: absolute;
9
  top: 50%;
10
  left: 50%;
11

12
  transform: translate(-50%, -50%);
13
}

原理：

1. top: 50%：让子元素的顶部移动到父元素高度的 50% 处。
2. left: 50%：让子元素的左侧移动到父元素宽度的 50% 处。
3. translate(-50%, -50%)：再向左、向上移动子元素自身宽高的一半。

这样就实现了水平和垂直居中。

现代开发中，如果只是实现普通容器居中，通常使用 Flex 或 Grid 更简单。

rotateX：绕 X 轴旋转#

1
.box {
2
  transform: rotateX(45deg);
3
}

元素围绕水平轴旋转，可以理解为上下翻转的效果。

rotateY：绕 Y 轴旋转#

1
.box {
2
  transform: rotateY(45deg);
3
}

元素围绕垂直轴旋转，可以理解为左右翻转的效果。

rotateZ：绕 Z 轴旋转#

1
.box {
2
  transform: rotateZ(45deg);
3
}

元素围绕垂直于屏幕的轴旋转。

在常见的平面元素上，rotateZ(45deg) 的视觉效果与 rotate(45deg) 相同。

rotate3d：自定义旋转轴#

1
transform: rotate3d(x, y, z, angle);

前三个参数指定旋转轴的方向，最后一个参数指定旋转角度。

1
/* 绕 X 轴 */
2
transform: rotate3d(1, 0, 0, 45deg);
3

4
/* 绕 Y 轴 */
5
transform: rotate3d(0, 1, 0, 45deg);
6

7
/* 绕 Z 轴 */
8
transform: rotate3d(0, 0, 1, 45deg);
9

10
/* 绕 X、Y 都有分量的斜轴 */
11
transform: rotate3d(1, 1, 0, 45deg);

perspective：设置透视距离#

单纯使用 3D 旋转，并不一定能看到明显的立体效果。

通常需要配合 perspective 实现透视。

代码示例：

1
<div class="scene">
2
  <div class="box">3D BOX</div>
3
</div>
4
.scene {
5
  perspective: 800px;
6
}
7

8
.box {
9
  width: 200px;
10
  height: 200px;
11
  background-color: red;
12

13
  transform: rotateY(45deg);
14
}

perspective 表示观察者与投影平面之间的距离：

• perspective: 400px：透视效果较强。
• perspective: 800px：透视效果相对柔和。
• perspective: 1500px：透视效果较弱。

需要注意，示例使用的是父元素的 perspective 属性。如果改用 transform: perspective(800px) rotateY(45deg)，透视函数和旋转函数都写在元素自身的 transform 中。

另外，制作嵌套 3D 场景时，还经常需要：

1
transform-style: preserve-3d;
2
backface-visibility: hidden;

分别用于保留子元素的 3D 空间关系、隐藏元素朝向背面的表面。