一、概念讲解

2D变换（transform） 是CSS3提供的用于对元素进行平面空间变换的技术，通过修改元素的坐标、旋转角度、缩放比例或倾斜程度，实现动态视觉效果，且不会影响文档流布局。常见的2D变换包括平移（translate）、旋转（rotate）、缩放（scale） 和倾斜（skew），可单独使用或组合应用。

二、语法参考

2.1 基础语法

/* 单一变换 */
.element {
  transform: translate(50px, 20px); /* 平移 */
}

/* 组合变换（按从右到左顺序执行） */
.element {
  transform: rotate(30deg) scale(1.2) translate(10px);
}

2.2 常用变换函数

函数 作用 语法示例 说明
translate(x, y) 沿X/Y轴平移元素 translate(50px, 20px) 正值向右/下平移，负值向左/上平移
translateX(x) 仅沿X轴平移 translateX(30%) 百分比基于元素自身宽度
translateY(y) 仅沿Y轴平移 translateY(-10px) -
rotate(angle) 顺时针旋转元素（单位deg/rad） rotate(45deg) 正值顺时针，负值逆时针
scale(x, y) 沿X/Y轴缩放元素 scale(1.5, 0.8) 1为原始大小，>1放大，<1缩小
scaleX(x) 仅沿X轴缩放 scaleX(0.5) -
scaleY(y) 仅沿Y轴缩放 scaleY(2) -
skew(x-angle, y-angle) 沿X/Y轴倾斜元素 skew(10deg, 5deg) 正值向右/下倾斜，负值向左/上倾斜
skewX(angle) 仅沿X轴倾斜 skewX(-15deg) -
skewY(angle) 仅沿Y轴倾斜 skewY(20deg) -

三、实战示例

3.1 基础示例：按钮悬停效果

<button class="transform-btn">悬停变换</button>

<style>
.transform-btn {
  padding: 12px 24px;
  border: none;
  background: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s ease; /* 平滑过渡 */
}

.transform-btn:hover {
  /* 组合变换：放大+上移+微旋转 */
  transform: scale(1.1) translateY(-5px) rotate(2deg);
}
</style>

效果：鼠标悬停时，按钮放大1.1倍、向上平移5px、顺时针旋转2度，增强交互反馈。

3.2 进阶示例：卡片翻转效果

<div class="card-container">
  <div class="card">正面内容</div>
</div>

<style>
.card-container {
  perspective: 1000px; /* 开启3D透视（父容器必备） */
}

.card {
  width: 200px;
  height: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 子元素保持3D空间 */
}

.card-container:hover .card {
  transform: rotateY(180deg); /* Y轴旋转180度（翻转） */
}
</style>

注意：此示例结合了perspective和transform-style实现3D视觉，但核心变换仍基于2D的rotateY函数。

四、注意事项

  1. 坐标系原点：默认变换原点为元素中心（transform-origin: 50% 50%），可通过transform-origin修改（如transform-origin: left bottom以左下角为原点）。 

    .element {
  transform-origin: top left; /* 左上角为变换原点 */
  transform: rotate(30deg); /* 围绕左上角旋转 */
}

  2. 性能优化：变换会触发浏览器重绘（repaint），复杂动画建议添加will-change: transform提示浏览器优化渲染。

  3. 兼容性：IE9需添加前缀-ms-transform，现代浏览器（Chrome/Firefox/Safari）无需前缀。

  4. 与position的区别：transform仅视觉变换，不影响其他元素布局；而position: relative会占据原始空间，可能导致其他元素位移。

五、自测题

  1. 如何实现元素沿X轴平移50px且放大1.5倍的组合变换？ 

    /* 答案 */
.element { transform: scale(1.5) translateX(50px); } /* 注意顺序：先缩放后平移 */

  2. transform: skew(30deg, 0)与transform: skewX(30deg)的效果是否相同？
    答案：相同，skew(30deg, 0)等价于skewX(30deg)。

  3. 变换原点对rotate的影响：若设置transform-origin: top right，元素旋转时会围绕哪个点转动？
    答案：右上角。