transform

This article is extracted from the chat log with AI. Please identify it with caution.

CSS Transform 体系详解#

Transform 是 CSS 中用于对元素进行变形处理的模块，可以让你在不改变文档流的情况下对元素进行旋转、缩放、移动和倾斜等操作。

🎯 核心变换函数#

1. 2D 变换函数#

📍 位移 (Translate)#

.element {
  transform: translateX(100px);     /* 水平移动 */
  transform: translateY(50px);      /* 垂直移动 */
  transform: translate(100px, 50px); /* 同时设置 X 和 Y */
  transform: translate(50%);        /* 使用百分比（相对于元素自身尺寸） */
}

🔄 旋转 (Rotate)#

.element {
  transform: rotate(45deg);         /* 顺时针旋转45度 */
  transform: rotate(-90deg);        /* 逆时针旋转90度 */
  transform: rotate(0.25turn);      /* 使用turn单位（0.25turn = 90deg） */
}

📏 缩放 (Scale)#

.element {
  transform: scale(1.5);            /* 等比例放大1.5倍 */
  transform: scaleX(2);             /* 仅水平方向放大 */
  transform: scaleY(0.5);           /* 仅垂直方向缩小 */
  transform: scale(2, 0.5);         /* 水平2倍，垂直0.5倍 */
}

📐 倾斜 (Skew)#

.element {
  transform: skewX(15deg);          /* 水平方向倾斜 */
  transform: skewY(10deg);          /* 垂直方向倾斜 */
  transform: skew(15deg, 10deg);    /* 同时设置 X 和 Y */
}

2. 3D 变换函数#

🎭 3D 位移#

.element {
  transform: translateZ(100px);     /* Z轴移动（远近） */
  transform: translate3d(100px, 50px, 200px); /* 3D空间移动 */
}

🎡 3D 旋转#

.element {
  transform: rotateX(45deg);        /* 绕X轴旋转 */
  transform: rotateY(30deg);        /* 绕Y轴旋转 */
  transform: rotateZ(60deg);        /* 绕Z轴旋转（等同于rotate） */
  transform: rotate3d(1, 1, 0, 45deg); /* 自定义轴旋转 */
}

🔧 关键属性配置#

1. 变换原点 (transform-origin)#

控制变换的基准点：

.element {
  transform-origin: center center;  /* 默认值：中心 */
  transform-origin: left top;       /* 左上角 */
  transform-origin: 100px 200px;    /* 具体坐标 */
  transform-origin: 0% 0%;          /* 百分比 */
}

2. 透视 (perspective)#

创建 3D 空间感：

.container {
  perspective: 1000px;              /* 透视距离 */
  perspective-origin: center center; /* 视点位置 */
}

3. 3D 渲染上下文#

.container {
  transform-style: preserve-3d;     /* 子元素保持3D位置 */
}

.element {
  backface-visibility: hidden;      /* 背面不可见 */
}

💡 实用技巧和示例#

1. 多重变换组合#

.card {
  transform: 
    translateX(50px) 
    rotate(15deg) 
    scale(1.1);
  /* 注意：变换顺序很重要！ */
}

2. 居中定位技巧#

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

3. 悬停交互效果#

.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.05) translateY(-2px);
}

4. 3D 卡片翻转#

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

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

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

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

⚡ 性能优化#

硬件加速#

使用 3D 变换可以触发 GPU 加速：

.optimized {
  transform: translateZ(0);  /* 触发硬件加速 */
  /* 或者 */
  transform: translate3d(0, 0, 0);
}

性能对比#

  • ✅ 高性能：transform, opacity
  • ⚠️ 中等性能：position, scale
  • ❌ 低性能：margin, padding, width/height

🎨 实际应用场景#

1. 加载动画#

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

2. 图片画廊#

.gallery-item {
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.1) rotate(5deg);
  z-index: 10;
}

3. 视差滚动#

.parallax {
  transform: translateZ(-1px) scale(2);
}

📋 浏览器兼容性#

  • ✅ 现代浏览器：完全支持
  • ✅ IE 10+：支持 2D 变换
  • ⚠️ IE 9：部分支持（需 -ms- 前缀）

💎 总结#

CSS Transform 体系提供了强大的元素变形能力：

  • 🎯 核心功能：位移、旋转、缩放、倾斜
  • 🔧 维度扩展：2D 和 3D 变换
  • ⚡ 性能优势：硬件加速，不影响文档流
  • 🎨 创意空间：动画、交互、视觉效果
  • 📱 响应式友好：基于元素自身尺寸计算

掌握 Transform 可以让你创建更加生动、交互性更强的网页体验！

transform 函数总结#

transform - MDN 属性允许你旋转、缩放、倾斜或平移给定元素。

/* 关键字值 */
transform: none;

/* 函数值 */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 多个函数值 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 全局值 */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

在 CSS 中，transform 属性用于应用2D或3D的转换效果，这些转换可以包括移动、旋转、缩放和倾斜。常用的 CSS transform 函数包括以下几种：

2D 转换函数#

  1. translate(x, y)

    • 移动元素。x 表示水平方向的移动距离，y 表示垂直方向的移动距离。
    • 示例：transform: translate(50px, 100px);

  2. translateX(x)

    • 沿水平方向移动元素。
    • 示例：transform: translateX(50px);

  3. translateY(y)

    • 沿垂直方向移动元素。
    • 示例：transform: translateY(100px);

  4. scale(x, y)

    • 按照比例缩放元素。x 是水平方向的缩放比例，y 是垂直方向的缩放比例。
    • 示例：transform: scale(1.5, 2);

  5. scaleX(x)

    • 沿水平方向缩放元素。
    • 示例：transform: scaleX(1.5);

  6. scaleY(y)

    • 沿垂直方向缩放元素。
    • 示例：transform: scaleY(2);

  7. rotate(angle)

    • 以角度 angle 旋转元素。正值表示顺时针旋转，负值表示逆时针旋转。
    • 示例：transform: rotate(45deg);

  8. skew(x-angle, y-angle)

    • 沿水平方向和垂直方向倾斜元素。x-angle 是水平方向的倾斜角度，y-angle 是垂直方向的倾斜角度。
    • 示例：transform: skew(30deg, 20deg);

  9. skewX(x-angle)

    • 沿水平方向倾斜元素。
    • 示例：transform: skewX(30deg);

  10. skewY(y-angle)

    • 沿垂直方向倾斜元素。
    • 示例：transform: skewY(20deg);

  11. matrix(a, b, c, d, e, f)

    • 使用矩阵变换元素。matrix(a, b, c, d, e, f) 是一个六参数的 2D 变换矩阵，可以实现上述所有2D变换的组合。
    • 示例：transform: matrix(1, 0, 0, 1, 50, 100); (相当于 translate(50px, 100px))

3D 转换函数#

  1. translateZ(z)

    • 沿 Z 轴移动元素。
    • 示例：transform: translateZ(100px);

  2. translate3d(x, y, z)

    • 在三维空间中移动元素。
    • 示例：transform: translate3d(50px, 100px, 200px);

  3. scaleZ(z)

    • 沿 Z 轴缩放元素。
    • 示例：transform: scaleZ(1.5);

  4. scale3d(x, y, z)

    • 在三维空间中缩放元素。
    • 示例：transform: scale3d(1.5, 2, 1.2);

  5. rotateX(angle)

    • 围绕 X 轴旋转元素。
    • 示例：transform: rotateX(45deg);

  6. rotateY(angle)

    • 围绕 Y 轴旋转元素。
    • 示例：transform: rotateY(45deg);

  7. rotateZ(angle)

    • 围绕 Z 轴旋转元素（相当于2D旋转）。
    • 示例：transform: rotateZ(45deg);

  8. rotate3d(x, y, z, angle)

    • 围绕通过坐标（x, y, z）的轴旋转元素。
    • 示例：transform: rotate3d(1, 1, 0, 45deg);

  9. perspective(n)

    • 定义 3D 空间中的视距，影响 3D 转换的透视效果。一般与其他 3D 变换结合使用。
    • 示例：transform: perspective(800px);

  10. matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

    • 使用 4x4 矩阵变换元素。matrix3d 可以实现上述所有3D变换的组合。
    • 示例：transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 200, 1);

这些函数可以按照需要单独使用或组合使用来创建复杂的变换效果。

🎯 主要触发方式#

Transform 动画可以通过多种方式触发，让我为你详细介绍各种触发机制和实际示例：

1. 伪类触发 (Hover, Focus, Active)#

/* Hover 悬停触发 */
.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1) translateY(-2px);
}

/* Focus 焦点触发 */
.input-field {
  transition: transform 0.2s ease;
}

.input-field:focus {
  transform: scale(1.02);
}

/* Active 点击时触发 */
.btn-press:active {
  transform: scale(0.95);
}

2. JavaScript 事件触发#

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: transform 0.5s ease;
}

.rotated {
  transform: rotate(45deg);
}

.scaled {
  transform: scale(1.5);
}

.moved {
  transform: translateX(200px);
}
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  
  <button onclick="rotateBox()">旋转</button>
  <button onclick="scaleBox()">放大</button>
  <button onclick="moveBox()">移动</button>
  <button onclick="resetBox()">重置</button>

  <script>
    const box = document.getElementById('myBox');
    
    function rotateBox() {
      box.classList.toggle('rotated');
    }
    
    function scaleBox() {
      box.classList.toggle('scaled');
    }
    
    function moveBox() {
      box.classList.toggle('moved');
    }
    
    function resetBox() {
      box.className = 'box';
    }
  </script>
</body>
</html>

3. CSS 动画自动触发#

/* 页面加载时自动播放动画 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.animated-element {
  animation: bounce 2s infinite;
}

/* 延迟触发 */
.delayed-animation {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 1s; /* 延迟1秒触发 */
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

4. 滚动触发 (Scroll)#

/* 使用 CSS @media (scroll-timeline) - 实验性功能 */
@keyframes revealOnScroll {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.scroll-reveal {
  animation: revealOnScroll linear;
  animation-timeline: view();
}
// 使用 JavaScript 监听滚动
window.addEventListener('scroll', function() {
  const elements = document.querySelectorAll('.scroll-element');
  const windowHeight = window.innerHeight;
  
  elements.forEach(element => {
    const elementTop = element.getBoundingClientRect().top;
    
    if (elementTop < windowHeight - 100) {
      element.style.transform = 'translateY(0) scale(1)';
      element.style.opacity = '1';
    }
  });
});

🎨 实际应用示例#

示例 1：交互式卡片#

.card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: perspective(1000px) rotateX(0) rotateY(0);
}

.card:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

示例 2：按钮点击反馈#

.btn-interactive {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  transform: scale(1);
}

.btn-interactive:active {
  transform: scale(0.95);
}

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

示例 3：加载状态指示器#

.loading-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.2);
  }
}

示例 4：表单验证反馈#

.input-field {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.input-field.valid {
  border-color: green;
  transform: scale(1.02);
}

.input-field.invalid {
  border-color: red;
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

🔧 进阶触发技巧#

1. Intersection Observer API#

// 当元素进入视口时触发动画
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

2. 键盘事件触发#

document.addEventListener('keydown', (e) => {
  const box = document.getElementById('keyboard-box');
  
  switch(e.key) {
    case 'ArrowUp':
      box.style.transform = 'translateY(-20px)';
      break;
    case 'ArrowDown':
      box.style.transform = 'translateY(20px)';
      break;
    case 'ArrowLeft':
      box.style.transform = 'translateX(-20px)';
      break;
    case 'ArrowRight':
      box.style.transform = 'translateX(20px)';
      break;
  }
});

3. 拖拽交互#

let isDragging = false;
const draggable = document.getElementById('draggable');

draggable.addEventListener('mousedown', () => {
  isDragging = true;
  draggable.style.transform = 'scale(1.1)';
});

document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    draggable.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(1.1)`;
  }
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  draggable.style.transform = 'scale(1)';
});

💎 总结#

Transform 动画可以通过多种方式触发：

  • 🎯 用户交互：Hover、点击、焦点等伪类
  • ⚡ JavaScript 事件：按钮点击、键盘输入、滚动等
  • 🔄 自动播放：页面加载时自动开始的动画
  • 📱 高级交互：拖拽、手势、视口检测等

最佳实践建议：

  • 使用 transform 和 opacity 制作动画以获得最佳性能
  • 合理使用 transition 和 animation 属性
  • 考虑用户体验，避免过度动画
  • 为重要的交互提供适当的视觉反馈

这些触发方式可以单独使用，也可以组合使用来创建丰富的交互体验！

本文共 3095 字，创建于 Oct 6, 2025

相关标签： Frontend, CSS, ByAI, Animation

Backward Overview transition Forward