CSS transform属性详解：从2D平移到3D旋转的完整变换指南

来源：IPIPP.com作者：陈平安时间：05-15

导读：本期聚焦于小伙伴创作的《CSS transform属性详解：从2D平移到3D旋转的完整变换指南》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《CSS transform属性详解：从2D平移到3D旋转的完整变换指南》有用，将其分享出去将是对创作者最好的鼓励。

HTML中元素变形：transform属性的2D和3D变换综合应用

在网页开发中，我们经常需要对元素进行平移、旋转、缩放、倾斜等变形操作，这时候就可以用到CSS的transform属性。它可以直接作用于HTML元素，不需要修改元素本身的布局流，就能实现丰富的视觉效果，是前端动画和交互效果实现的核心属性之一。

一、transform属性的基础说明

transform是CSS3新增的属性，用于设置元素的变形效果，它不会影响到文档的正常布局流，变形后的元素仍然占据原来的文档位置。该属性可以接收多个变形函数，多个函数之间用空格分隔，会按照从左到右的顺序依次执行。

使用时需要注意，transform属性需要配合具体的变形函数使用，常见的变形函数分为2D变换和3D变换两大类。

二、2D变换常用函数

2D变换是在二维平面内对元素进行操作，所有变形都只涉及x轴和y轴的变化，下面介绍几个最常用的2D变换函数。

1. 平移：translate()

translate()函数用于移动元素的位置，接收两个参数，分别是x轴方向的偏移量和y轴方向的偏移量，单位可以是px、%、em等。如果只传一个参数，默认只设置x轴偏移，y轴偏移为0。

/* 2D平移示例 */
.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  /* 向右移动50px，向下移动30px */
  transform: translate(50px, 30px);
}

/* 也可以单独设置x或y轴偏移 */
.translate-x {
  transform: translateX(80px); /* 仅x轴偏移 */
}
.translate-y {
  transform: translateY(40px); /* 仅y轴偏移 */
}

2. 旋转：rotate()

rotate()函数用于旋转元素，参数是旋转的角度，单位是deg（度），正值表示顺时针旋转，负值表示逆时针旋转。旋转的中心点默认是元素的中心，也可以通过transform-origin属性修改。

/* 2D旋转示例 */
.rotate-box {
  width: 120px;
  height: 80px;
  background-color: #2196F3;
  /* 顺时针旋转45度 */
  transform: rotate(45deg);
}

/* 修改旋转中心点 */
.origin-box {
  width: 100px;
  height: 100px;
  background-color: #FF9800;
  transform-origin: left top; /* 旋转中心设置为左上角 */
  transform: rotate(30deg);
}

3. 缩放：scale()

scale()函数用于缩放元素的大小，接收一个或两个参数，分别是x轴方向的缩放比例和y轴方向的缩放比例。如果只传一个参数，x和y轴会按照相同比例缩放。缩放比例为1表示原尺寸，大于1是放大，小于1是缩小。

/* 2D缩放示例 */
.scale-box {
  width: 100px;
  height: 100px;
  background-color: #9C27B0;
  /* x轴放大1.5倍，y轴放大1.2倍 */
  transform: scale(1.5, 1.2);
}

/* 等比例缩放 */
.scale-same {
  transform: scale(0.8); /* 整体缩小为原来的80% */
}

4. 倾斜：skew()

skew()函数用于让元素沿x轴和y轴倾斜，接收两个参数，分别是x轴方向的倾斜角度和y轴方向的倾斜角度，单位也是deg。正值表示沿轴正向倾斜，负值表示反向倾斜。

/* 2D倾斜示例 */
.skew-box {
  width: 120px;
  height: 80px;
  background-color: #F44336;
  /* x轴倾斜20度，y轴倾斜10度 */
  transform: skew(20deg, 10deg);
}

/* 单独设置x轴倾斜 */
.skew-x {
  transform: skewX(-15deg);
}

5. 2D变换组合使用

多个2D变换函数可以组合使用，按顺序执行效果，比如先平移再旋转，和先旋转再平移的效果是不同的。

/* 组合2D变换示例 */
.combine-2d {
  width: 100px;
  height: 100px;
  background-color: #00BCD4;
  /* 先向右平移30px，再顺时针旋转30度 */
  transform: translateX(30px) rotate(30deg);
}

三、3D变换常用函数

3D变换增加了z轴的维度，能够实现更有空间感的视觉效果，使用时通常需要配合perspective属性设置透视距离，否则3D效果会非常不明显。

1. 3D平移：translate3d()

translate3d()函数用于三维空间的平移，接收三个参数，分别是x轴、y轴、z轴的偏移量，z轴的偏移量通常使用px单位。也可以使用单独的translateZ()函数只设置z轴偏移。

/* 3D平移示例 */
.container {
  /* 设置透视距离，值越小透视效果越强 */
  perspective: 500px;
}
.translate-3d-box {
  width: 100px;
  height: 100px;
  background-color: #8BC34A;
  /* x轴移20px，y轴移10px，z轴移50px（靠近用户） */
  transform: translate3d(20px, 10px, 50px);
}

2. 3D旋转：rotate3d()

rotate3d()函数用于三维空间的旋转，接收四个参数，前三个是x、y、z轴的向量值（0或1，表示是否绕该轴旋转），第四个是旋转的角度。也可以使用单独的rotateX()、rotateY()、rotateZ()函数分别绕对应轴旋转。

/* 3D旋转示例 */
.rotate-3d-box {
  width: 120px;
  height: 80px;
  background-color: #FF5722;
  /* 绕Y轴顺时针旋转45度 */
  transform: rotateY(45deg);
}

/* 绕X轴旋转示例 */
.rotate-x-box {
  width: 100px;
  height: 100px;
  background-color: #607D8B;
  transform: rotateX(30deg);
}

3. 3D缩放：scale3d()

scale3d()函数用于三维空间的缩放，接收三个参数，分别是x轴、y轴、z轴的缩放比例，也可以使用单独的scaleZ()函数只设置z轴缩放。

/* 3D缩放示例 */
.scale-3d-box {
  width: 100px;
  height: 100px;
  background-color: #E91E63;
  /* x轴放大1.2倍，y轴放大1倍，z轴放大0.8倍 */
  transform: scale3d(1.2, 1, 0.8);
}

4. 3D变换组合使用

3D变换也可以和2D变换组合，同时结合透视属性实现更丰富的效果。

/* 3D组合变换示例 */
.scene {
  perspective: 800px; /* 父容器设置透视 */
}
.combine-3d {
  width: 150px;
  height: 100px;
  background-color: #3F51B5;
  /* 先沿Y轴旋转60度，再沿Z轴旋转15度，最后向z轴正方向移动30px */
  transform: rotateY(60deg) rotateZ(15deg) translateZ(30px);
}

四、综合应用示例

下面通过一个卡片翻转的效果，展示transform属性的综合应用，这个效果用到了3D旋转和透视属性，实现卡片正反面的切换。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片翻转示例</title>
  <style>
    /* 场景容器，设置透视 */
    .card-scene {
      width: 200px;
      height: 300px;
      perspective: 1000px;
      margin: 50px auto;
    }
    /* 卡片容器，设置3D变换保留 */
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* 让子元素保持3D效果 */
      transition: transform 0.8s; /* 添加过渡动画 */
    }
    /* 鼠标悬停时翻转卡片 */
    .card-scene:hover .card {
      transform: rotateY(180deg);
    }
    /* 卡片正反面公共样式 */
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* 隐藏背面 */
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
    }
    /* 正面样式 */
    .card-front {
      background-color: #2196F3;
    }
    /* 背面样式，初始旋转180度，翻转后显示 */
    .card-back {
      background-color: #4CAF50;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="card-scene">
    <div class="card">
      <div class="card-front">正面</div>
      <div class="card-back">背面</div>
    </div>
  </div>
</body>
</html>

这个示例中，关键点是给父容器设置perspective属性产生透视效果，给卡片容器设置transform-style: preserve-3d让正反两面都在3D空间内，再结合rotateY实现翻转，配合backface-visibility: hidden隐藏元素的背面，最终得到流畅的卡片翻转效果。

五、使用注意事项

transform属性不会触发重排（reflow），只会触发重绘（repaint）和合成（composite），性能比修改宽高、位置等属性更好，适合做动画效果。
当多个transform函数组合时，执行顺序是从左到右，顺序不同最终效果可能完全不同，需要根据需求调整顺序。
3D变换时，如果父元素没有设置perspective，3D效果会非常弱，几乎看不出立体感，建议给3D变换元素的父容器设置合理的透视值。
如果需要让子元素也保持3D变换效果，需要给父元素设置transform-style: preserve-3d，否则子元素的3D变换会被扁平化处理。

CSS_transform属性 2D变换 3D变换旋转缩放卡片翻转效果

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。