本文详解如何通过合理设置 transform 顺序与 transform-origin，让对角线段（如带边框的伪元素）沿预设角度（如 40°）从零长度平滑伸展至完整长度，全程保持角度恒定、无视觉旋转。
本文详解如何通过合理设置 transform 顺序与 transform-origin，让对角线段（如带边框的伪元素）沿预设角度（如 40°）从零长度平滑伸展至完整长度，全程保持角度恒定、无视觉旋转。
在 CSS 动画中，实现“斜线生长”效果常被误用 scaleX() 配合 rotate()，但关键陷阱在于：transform 函数的执行顺序直接影响最终形态。浏览器按从左到右顺序应用变换——scaleX(0) rotate(40deg) 先缩放再旋转，而 rotate(40deg) scaleX(0) 是先旋转后沿 X 轴压缩，后者才能确保伸展始终沿已旋转后的方向进行。
✅ 正确原理：先旋转，再沿倾斜方向伸缩
要让线条“沿自身角度生长”，必须：
- 固定旋转角度不变（即 rotate(40deg) 始终存在）；
- 仅改变缩放比例（scaleX(0) → scaleX(1)），且该缩放发生在旋转后的坐标系中；
- 设置合适的 transform-origin，使缩放锚点位于线条的起始端（如 right bottom），避免位移抖动。
以下为精简可靠的实现方案：
<div class="rec-1"></div> <div class="rec-1"></div> <div class="rec-1"></div> <div class="rec-1"></div>
.rec-1 {
/* 关键：先旋转，再 scaleX；origin 设为右下角，确保从左端向右伸展 */
transform: rotate(40deg) scaleX(0);
transform-origin: right bottom;
/* 使用 border-bottom 模拟粗线（高度即线宽）*/
border-bottom: 30px solid;
width: 72.5%;
margin: 1rem 0;
/* 动画：仅控制 scaleX，旋转值全程恒定 */
animation: appearUp 1.5s linear forwards;
}
@keyframes appearUp {
to {
transform: rotate(40deg) scaleX(1);
}
}
/* 颜色分层（可选）*/
.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; }
/* 页面基础重置 */
body {
margin: 0;
min-height: 100vh;
display: grid;
align-items: end; /* 将线条底部对齐视口底边，便于观察生长起点 */
overflow: hidden;
}⚠️ 注意事项与优化建议
- 避免混用多个 transform 声明：原代码中 .rec-1 同时声明了 transform: scaleX(100%) rotate(40deg) 和独立 animation，易导致覆盖冲突。应统一在 @keyframes 中定义完整 transform 值。
- scaleX(100%) 写法不规范：CSS 中 scaleX() 接收无单位数值，scaleX(100%) 会被忽略或解析异常，应写作 scaleX(1)（100% = 1）。
- 响应式适配：若需适配不同屏幕，建议将 width 改为 max-width，并配合 transform: rotate(40deg) scaleX(calc(1 - var(--progress, 0))) 配合 JS 控制进度，增强灵活性。
- 性能提示：transform 和 opacity 是仅触发合成器的属性，本方案完全符合高性能动画要求，无需额外优化。
✅ 总结
实现“无旋转的对角线生长”，本质是控制变换顺序 + 锚点定位 + 单一可变参数：
① rotate() 必须写在 scaleX() 左侧；
② transform-origin 应设为线条静止端（如 right bottom 或 left bottom，依布局而定）；
③ 动画中只改变 scaleX() 的数值，其他 transform 成分保持恒定。
掌握这一模式，即可轻松复用于任意角度（如 30°、60°）、任意方向（左上/右下/垂直）的生长类动效。
