2D/3D 变换

约 352 字大约 1 分钟

布欧-Lewyon

2026-05-16

2D 变换

.box {
  /* 平移 */
  transform: translateX(20px);          /* 水平移动 */
  transform: translate(20px, 10px);    /* 同时水平+垂直 */

  /* 旋转 */
  transform: rotate(45deg);            /* 45度 */

  /* 缩放 */
  transform: scale(1.5);               /* 放大 1.5 倍 */
  transform: scaleX(0.8);              /* 水平缩放 */
  transform: scale(1.5, 0.5);          /* 宽高不同比例 */

  /* 倾斜 */
  transform: skewX(10deg);             /* 水平倾斜 */
  transform: skew(10deg, 5deg);

  /* 原点 */
  transform-origin: center;            /* 默认 center */
  transform-origin: top left;
  transform-origin: 30% 40%;
}

3D 变换

.card {
  /* 透视——设置在父元素上 */
  perspective: 800px;
}

.card-item {
  transform: rotateY(30deg);       /* 绕 Y 轴旋转 */
  transform: rotateX(20deg);       /* 绕 X 轴旋转 */
  transform: rotateZ(45deg);       /* 绕 Z 轴旋转 = 2D rotate */

  transform: translateZ(50px);     /* Z 轴平移（3D 效果）*/
  transform: translate3d(x, y, z);

  transform: scaleZ(1.5);          /* Z 轴缩放 */
  transform: scale3d(x, y, z);

  /* 3D 透视 */
  transform: perspective(800px) rotateY(30deg);
}

3D 空间控制

.card-item {
  /* 保留 3D 空间（子元素 3D 变换生效） */
  transform-style: preserve-3d;

  /* 背面是否可见 */
  backface-visibility: hidden;
}

复合变换

.box {
  transform: translateX(20px) rotate(45deg) scale(1.2);
  /* 顺序重要：从右到左执行 */
}

小结

函数	作用
`translate()`	平移
`rotate()`	旋转
`scale()`	缩放
`skew()`	倾斜
`perspective()`	透视（3D）
`transform-origin`	变换原点

上一节：阴影、圆角与边框下一节：滤镜、混合模式与裁剪