本文详解如何通过调整 transform 顺序与 transform-origin，让对角线元素（如带底边的 span）沿预设角度（如 40°）从零长度平滑延伸至全长，全程保持角度恒定、无视觉旋转。
本文详解如何通过调整 transform 顺序与 transform-origin，让对角线元素（如带底边的 span）沿预设角度（如 40°）从零长度平滑延伸至全长，全程保持角度恒定、无视觉旋转。
在 CSS 动画中，实现“斜线生长”却不发生旋转错觉，关键在于理解 transform 的复合执行顺序：变换按书写顺序从右到左应用（即后写的先执行）。原始代码中 scaleX(100%) rotate(40deg) 会导致元素先缩放再旋转，而动画起始态 scaleX(0) rotate(0deg) 又强制重置角度——这正是旋转“抖动”或角度偏移的根源。
✅ 正确解法是：固定旋转 → 再缩放，且缩放始终作用于已旋转后的坐标系。只需将 rotate() 置于 scaleX() 左侧，并统一初始/结束状态的旋转值：
.rec-1 {
/* 关键：先旋转定角度，再沿该方向缩放 */
transform: rotate(40deg) scaleX(0);
transform-origin: right bottom; /* 缩放锚点设在右下角，使线条从右向左“拉出” */
animation: appearUp 1.5s linear forwards;
border-bottom: 30px solid; /* 颜色由 nth-of-type 控制 */
height: 0; /* 显式设高为0，强化视觉起点 */
}
@keyframes appearUp {
to {
transform: rotate(40deg) scaleX(1); /* 注意：scaleX(1) = 100%，无需写%单位 */
}
}同时优化 HTML 结构，移除冗余容器与内联定位（如 left: 500px; top: 350px），改用语义化布局与现代定位方式：
<!-- 精简结构，避免嵌套干扰 --> <div class="diagonal-stripes"> <div class="rec-1" style="border-bottom-color: #1DCDFE;"></div> <div class="rec-1" style="border-bottom-color: #11FFC4;"></div> <div class="rec-1" style="border-bottom-color: #21D0B2;"></div> <div class="rec-1" style="border-bottom-color: #2F455C;"></div> </div>
配合容器居底布局（适配“从底部向上生长”的视觉逻辑）：
立即学习“前端免费学习笔记（深入）”；
.diagonal-stripes {
display: grid;
min-height: 100vh;
align-items: end; /* 所有线条默认停靠视口底部 */
justify-content: center;
gap: 1.5rem;
padding: 2rem;
overflow: hidden;
}⚠️ 重要注意事项：
- transform-origin: right bottom 是核心——它确保 scaleX(0) 时线条收缩至右下顶点，scaleX(1) 时向左延伸，形成“从右向左生长”的斜线效果；若需“从左向右”，则改为 left bottom。
- 不要混用 scaleX(0%) 和 scaleX(0)：CSS 中 scale() 函数参数为无量纲数值（0 表示 0%，1 表示 100%），写 scaleX(0%) 会触发解析错误。
- 避免在动画中切换 transform 类型（如从 rotate() 切到 skew()），易导致插值异常；本方案全程只操作 rotate() + scaleX()，保证平滑过渡。
- 若需响应式适配，可将 rotate(40deg) 替换为 CSS 自定义属性（如 --angle: 40deg），便于 JS 动态控制。
最终效果：四条不同颜色的斜线，以精确 40° 倾斜角，从右下角锚点同步向左延伸，全程角度稳定、无晃动、无缩放畸变——真正实现了“定向生长”的专业动效。
