前端Wiki/CSS3/进阶/2D 与 3D 变换

transform 2D 变换

transform 对元素做几何变换，不脱离文档流、不触发重排，是性能最好的视觉变化手段。2D 四大金刚：

translate(x, y)：平移。相对自身尺寸，百分比也指自身，所以 translate(-50%, -50%) 是「绝对定位 + 居中」的经典组合。
rotate(deg)：旋转，正数顺时针。
scale(x, y)：缩放，1 是原大，0.5 一半，负值翻转。
skew(deg)：倾斜，可做平行四边形装饰。

可以逗号组合多项，顺序有影响：translate(100px) rotate(45deg) 和 rotate(45deg) translate(100px) 结果不同——变换是从左往右依次 applied 的坐标系变换。

两个重要配角：transform-origin 改变变换基准点（默认中心），如 top left 让旋转绕左上角；transform: none 可作为过渡的复位值。

本节要点translate/rotate/scale/skew 四类变换可组合、顺序影响结果；translate(-50%,-50%) 配绝对定位实现居中；origin 决定绕哪个点变换。

CSS

<style>
  .box {
    width: 80px; height: 80px;
    background: #39c5cf;
    color: #fff;
    display: flex; align-items: center;
    justify-content: center;
    transition: transform .4s;
  }
  .box:hover {
    /* 组合：右移50 旋转15度 放大1.2 */
    transform: translateX(50px) rotate(15deg) scale(1.2);
  }
  .diamond {
    width: 60px; height: 60px;
    margin: 30px 0 0 30px;
    background: #7c4dff;
    transform: rotate(45deg); /* 正方形转成菱形 */
  }
</style>
<div class="box">悬停变换</div>
<div class="diamond"></div>

🔗 相关词条transform 绝对定位文档流元素过渡

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读