跳至主要內容

变换函数

Kpsmart2025年3月4日大约 4 分钟

变换函数

CSS 变换函数用于修改元素的外观和位置，可以实现平移、旋转、缩放和倾斜等效果，是创建动画和交互效果的重要工具。

函数列表

下面是变换函数的完整列表，点击函数名可跳转到 MDN 文档查看详细信息。

函数名描述语法
translate()在水平和/或垂直方向移动元素translate(x, y)
translateX()在水平方向移动元素translateX(x)
translateY()在垂直方向移动元素translateY(y)
translateZ()在 Z 轴方向移动元素translateZ(z)
translate3d()在三维空间移动元素translate3d(x, y, z)
scale()缩放元素的大小scale(x, y)
scaleX()水平方向缩放元素scaleX(x)
scaleY()垂直方向缩放元素scaleY(y)
scaleZ()Z 轴方向缩放元素scaleZ(z)
scale3d()三维空间缩放元素scale3d(x, y, z)
rotate()旋转元素rotate(angle)
rotateX()绕 X 轴旋转元素rotateX(angle)
rotateY()绕 Y 轴旋转元素rotateY(angle)
rotateZ()绕 Z 轴旋转元素rotateZ(angle)
rotate3d()在三维空间旋转元素rotate3d(x, y, z, angle)
skew()倾斜元素skew(x-angle, y-angle)
skewX()水平方向倾斜元素skewX(angle)
skewY()垂直方向倾斜元素skewY(angle)
matrix()使用 2D 变换矩阵变换元素matrix(a, b, c, d, tx, ty)
matrix3d()使用 3D 变换矩阵变换元素matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
perspective()为 3D 变换设置透视距离perspective(length)

使用示例

/* 基本变换示例 */
.translate-example {
  transform: translate(50px, 100px);
}

.scale-example {
  transform: scale(1.5, 2);
}

.rotate-example {
  transform: rotate(45deg);
}

.skew-example {
  transform: skew(10deg, 20deg);
}

/* 3D 变换示例 */
.translate3d-example {
  transform: translate3d(50px, 100px, 200px);
}

.rotate3d-example {
  transform: rotate3d(1, 1, 1, 45deg);
}

/* 组合变换示例 */
.combined-transform {
  transform: translateX(50px) rotate(45deg) scale(1.5);
}

/* 设置变换原点 */
.transform-origin-example {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* 3D 空间设置 */
.perspective-container {
  perspective: 1000px;
}

.perspective-child {
  transform: rotateY(45deg);
}

/* 保持 3D 空间 */
.preserve-3d {
  transform-style: preserve-3d;
}

/* 背面可见性 */
.backface-hidden {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

变换属性

属性描述示例
transform应用 2D 或 3D 变换transform: rotate(45deg);
transform-origin设置变换的原点transform-origin: center;
transform-style设置元素的子元素是位于 3D 空间中还是平面中transform-style: preserve-3d;
perspective为元素设置透视视图perspective: 1000px;
perspective-origin设置透视视图的原点perspective-origin: center;
backface-visibility设置元素背面是否可见backface-visibility: hidden;

常见应用场景

居中定位

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

悬停效果

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.1);
}

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(10deg);
}

卡片翻转

.card-container {
  perspective: 1000px;
}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

3D 立方体

.cube-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube:hover {
  transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.cube-face-front { transform: rotateY(0deg) translateZ(100px); }
.cube-face-back { transform: rotateY(180deg) translateZ(100px); }
.cube-face-right { transform: rotateY(90deg) translateZ(100px); }
.cube-face-left { transform: rotateY(-90deg) translateZ(100px); }
.cube-face-top { transform: rotateX(90deg) translateZ(100px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(100px); }

浏览器兼容性

函数类型ChromeFirefoxSafariEdge
2D 变换 (translate, scale, rotate, skew)36+16+9+12+
3D 变换 (translate3d, rotate3d, etc.)36+16+9+12+
matrix()36+16+9+12+
matrix3d()36+16+9+12+
perspective()36+16+9+12+

兼容性说明

对于旧版浏览器，可能需要添加前缀，如 -webkit-transform、-moz-transform 等。现代浏览器已不需要前缀。

性能优化

  1. 使用 transform 和 opacity 进行动画：这两个属性的变化不会触发重排，性能更好。
  2. 启用硬件加速：添加 transform: translateZ(0) 或 will-change: transform 可以启用 GPU 加速。
  3. 避免同时变换过多元素：同时变换大量元素会导致性能问题。
  4. 使用 transform-style: preserve-3d：只在需要 3D 效果时使用，否则会消耗更多资源。

相关资源