如何通过CSS制作对角线段沿特定角度无旋转生长动画？

本文共计487个文字，预计阅读时间需要2分钟。

CSS3中，`transform` 属性允许对元素进行旋转、缩放、倾斜、平移等变换。要精确控制这些变换，我们可以使用以下两个属性：

立即学习“前端免费学习笔记（深入）”；

• 变换顺序不可逆：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 <line> 配合 stroke-dasharray 动画。
• 动画性能优化：为 .rec-1 添加 will-change: transform（生产环境慎用）或确保其处于独立图层（如启用 transform: translateZ(0)）。

掌握这一模式后，你可轻松复用至任何角度（如 30°、60°）、任意颜色组合或交错延迟动画（通过 animation-delay 实现波浪式入场），真正实现专业级几何动效控制。