知识库

Appearance

Return to top
On this page

CSS 变换效果

CSS 变换 (Transforms) 用于修改元素的形状、大小和位置。

概述

CSS 变换允许元素在二维或三维空间中进行移动、旋转、缩放和倾斜，而不会影响文档流。

二维变换

transform 属性

应用变换效果：

css
.element {
  transform: translate(10px, 20px); /* 移动 */
  transform: rotate(45deg); /* 旋转 */
  transform: scale(1.5); /* 缩放 */
  transform: skew(30deg, 20deg); /* 倾斜 */
  transform: matrix(1, 0.5, -0.5, 1, 10, 10); /* 矩阵变换 */
}

translate()

移动元素：

css
.element {
  transform: translate(10px, 20px); /* x, y 方向移动 */
  transform: translateX(10px); /* 仅 x 方向 */
  transform: translateY(20px); /* 仅 y 方向 */
  transform: translate(50%, 50%); /* 相对自身尺寸的百分比 */
}

rotate()

旋转元素：

css
.element {
  transform: rotate(45deg); /* 顺时针旋转45度 */
  transform: rotate(0.5turn); /* 使用turn单位 */
  transform: rotate(2rad); /* 使用弧度 */
}

scale()

缩放元素：

css
.element {
  transform: scale(1.5); /* x, y 方向同时缩放 */
  transform: scaleX(1.5); /* 仅 x 方向缩放 */
  transform: scaleY(0.5); /* 仅 y 方向缩放 */
  transform: scale(1.5, 0.8); /* x方向1.5倍，y方向0.8倍 */
}

skew()

倾斜元素：

css
.element {
  transform: skew(30deg, 20deg); /* x, y 方向倾斜 */
  transform: skewX(30deg); /* 仅 x 方向倾斜 */
  transform: skewY(20deg); /* 仅 y 方向倾斜 */
}

三维变换

3D 移动

css
.element {
  transform: translate3d(10px, 20px, 30px); /* x, y, z 方向移动 */
  transform: translateZ(30px); /* 仅 z 方向移动 */
}

3D 旋转

css
.element {
  transform: rotate3d(1, 1, 0, 45deg); /* 沿指定轴旋转 */
  transform: rotateX(45deg); /* 绕 x 轴旋转 */
  transform: rotateY(45deg); /* 绕 y 轴旋转 */
  transform: rotateZ(45deg); /* 绕 z 轴旋转 */
}

3D 缩放

css
.element {
  transform: scale3d(1.5, 1.2, 1.0); /* x, y, z 方向缩放 */
  transform: scaleZ(1.5); /* 仅 z 方向缩放 */
}

变换原点

transform-origin

设置变换的中心点：

css
.element {
  transform-origin: 50% 50%; /* 默认值，中心点 */
  transform-origin: left top; /* 左上角 */
  transform-origin: 10px 20px; /* 具体坐标 */
  transform-origin: center bottom; /* 中心底部 */
  transform-origin: 20% 80%; /* 百分比位置 */
}

/* 3D 变换原点 */
.element-3d {
  transform-origin: 50% 50% 10px; /* x, y, z */
}

透视效果

perspective

设置3D变换的透视效果：

css
.scene {
  perspective: 1000px; /* 设置透视距离 */
}

.element {
  transform: rotateY(45deg); /* 在透视环境中旋转 */
}

perspective-origin

设置透视的原点：

css
.scene {
  perspective: 1000px;
  perspective-origin: 50% 50%; /* 默认值 */
  perspective-origin: left top; /* 透视原点 */
}

transform-style

设置嵌套元素的3D位置关系：

css
.parent {
  transform-style: flat; /* 默认值，扁平化 */
  transform-style: preserve-3d; /* 保持3D位置 */
}

多重变换

变换函数组合

css
.complex-transform {
  transform: translate(10px, 20px) rotate(45deg) scale(1.2);
  /* 按顺序应用多个变换 */
}

/* 注意变换顺序会影响结果 */
.sequence-1 {
  transform: translate(100px, 0) rotate(45deg); /* 先移动再旋转 */
}

.sequence-2 {
  transform: rotate(45deg) translate(100px, 0); /* 先旋转再移动 */
}

实用变换效果

中心点旋转

css
.rotate-center {
  transform-origin: center center;
  transform: rotate(45deg);
}

3D 翻转效果

css
.flip-container {
  perspective: 1000px;
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

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

倾斜效果

css
.skew-element {
  transform: skewX(-10deg);
  transform-origin: 0 0; /* 设置倾斜原点 */
}

缩放悬停效果

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

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

3D 旋转立方体

css
.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-30deg);
}

.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  opacity: 0.8;
}

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

性能优化

硬件加速

css
.hardware-accelerated {
  transform: translateZ(0); /* 触发硬件加速 */
  /* 或使用 */
  will-change: transform; /* 提示浏览器优化 */
}

避免变换布局属性

css
/* 推荐：使用 transform 进行动画 */
.smooth-animation {
  transition: transform 0.3s;
}

.smooth-animation:hover {
  transform: translateX(100px);
}

/* 避免：直接变换会触发重排的属性 */
.bad-animation {
  transition: left 0.3s; /* 触发重排 */
}

变换矩阵

matrix() 和 matrix3d()

css
/* 2D 变换矩阵 */
.matrix-transform {
  transform: matrix(a, b, c, d, tx, ty);
  /* a, c, b, d 控制缩放/旋转/倾斜 */
  /* tx, ty 控制移动 */
}

/* 3D 变换矩阵 */
.matrix3d-transform {
  transform: matrix3d(n1, n2, ... n16); /* 4x4 矩阵 */
}

实际应用示例

按钮悬停效果

css
.btn {
  display: inline-block;
  padding: 10px 20px;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

导航菜单动画

css
.menu-item {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-item.active {
  opacity: 1;
  transform: translateY(0);
}

图片悬停效果

css
.image-container {
  overflow: hidden;
}

.image {
  transition: transform 0.5s ease;
}

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

可访问性考虑

减少动画偏好

css
@media (prefers-reduced-motion: reduce) {
  * {
    transform: none !important;
    transition: none !important;
  }
}

浏览器兼容性

添加厂商前缀

css
.element {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); /* Safari/Chrome */
  -moz-transform: rotate(45deg); /* Firefox */
  -ms-transform: rotate(45deg); /* IE */
}

最佳实践

  • 优先使用 transform 而非改变位置属性以获得更好的性能
  • 注意变换顺序，不同顺序会产生不同结果
  • 使用 transform-origin 精确控制变换中心点
  • 考虑用户偏好设置，提供减少动画的选项
  • 避免过度使用复杂变换效果
  • 测试在不同设备上的渲染性能
  • 合理使用硬件加速以提高动画流畅度