本文详解如何通过精确控制 transform 顺序与 transform-origin，让斜线元素（如带底边框的 ）沿预设角度（如 40°）从零长度平滑延伸至全长，全程保持角度恒定、无视觉旋转。
本文详解如何通过精确控制 transform 顺序与 transform-origin，让斜线元素（如带底边框的 `
`）沿预设角度（如 40°）从零长度平滑延伸至全长，全程保持角度恒定、无视觉旋转。
在 CSS 动画中实现“斜线生长”效果时，一个常见误区是将缩放（scaleX）与旋转（rotate）混用且顺序不当，导致元素在伸长过程中发生意外偏转。关键在于：变换的执行顺序直接影响最终视觉效果——rotate(40deg) scaleX(0) 与 scaleX(0) rotate(40deg) 的渲染结果截然不同。
要实现“固定角度下的纯长度增长”，必须确保旋转操作始终先于缩放执行，并将缩放锚点（即 transform-origin）设置为线条的起始端点（例如 right bottom），使缩放仅沿斜线方向拉伸，而非围绕中心扭曲。
以下为完整、可直接运行的解决方案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>对角线生长动画</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: grid;
min-height: 100vh;
align-items: end; /* 将线条底部对齐视口底边 */
justify-content: center;
overflow: hidden;
background: #0f172a;
padding: 2rem;
}
.rec-1 {
width: 200px; /* 基准宽度（缩放参考） */
height: 0;
border-bottom: 30px solid;
transform-origin: right bottom; /* 关键：缩放原点设在右下角 */
margin: 1rem 0;
animation: appearUp 1.5s ease-in-out forwards;
transform: rotate(40deg) scaleX(0); /* 先旋转，再水平缩放 */
}
@keyframes appearUp {
to {
transform: rotate(40deg) scaleX(1); /* scaleX(1) = 100%，非100%字符串 */
}
}
/* 颜色分层 */
.rec-1:nth-of-type(1) { border-color: #1DCDFE; }
.rec-1:nth-of-type(2) { border-color: #11FFC4; }
.rec-1:nth-of-type(3) { border-color: #21D0B2; }
.rec-1:nth-of-type(4) { border-color: #2F455C; }
</style>
</head>
<body>
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
</body>
</html>✅ 核心要点解析：
立即学习“前端免费学习笔记（深入）”；
- 变换顺序不可逆：rotate(40deg) scaleX(0) 表示“先绕自身原点旋转 40°，再沿 X 轴缩放”；若颠倒顺序，scaleX(0) rotate(40deg) 会先将元素压扁为一条线，再对其旋转——造成起点漂移与视觉抖动。
- transform-origin 决定生长起点：设为 right bottom 后，scaleX(0) 使线条收缩至右下角一点；scaleX(1) 则从此点向左上方延展，完美模拟“从端点出发的斜向生长”。
- 避免使用 scaleX(100%)：CSS 中 scaleX() 接收的是无单位数值（1 表示 100%，0.5 表示 50%），写成 scaleX(100%) 属于无效语法，可能导致动画失效。
⚠️ 注意事项：
- 若需响应式适配，建议用 vw/vmin 替代固定 px 宽度，并配合 transform: rotate(40deg) scaleX(calc(var(--scale, 0))) 配合 CSS 自定义属性动态控制。
- border-bottom 方案适用于单向斜线；若需双向延伸（如中心发散），应改用伪元素 + clip-path 或 SVG
配合 stroke-dasharray 动画。 - 动画性能优化：为 .rec-1 添加 will-change: transform（生产环境慎用）或确保其处于独立图层（如启用 transform: translateZ(0)）。
掌握这一模式后，你可轻松复用至任何角度（如 30°、60°）、任意颜色组合或交错延迟动画（通过 animation-delay 实现波浪式入场），真正实现专业级几何动效控制。
