CSS如何实现顶部线条旋转后对齐至盒子左侧边框？

问题描述 #

需要实现红色线条从盒子顶部位置向下旋转，最终完全贴合盒子左侧边框的动画效果，现有代码运行后线条旋转错位，无法达到预期。

原有实现代码 #

CSS 部分 #

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Grey+Qo&family=Jost:wght@100&family=Loved+by+the+King&family=Luckiest+Guy&family=Lusitana&family=Medula+One&family=Michroma&family=Petrona:wght@200&family=Philosopher&family=Ranga&display=swap');
*,*::after,*::before {
    padding: 0;
    margin: 0;
}
:root {
    --rotation-xy:0deg;
}
.container {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #000;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;

}

.box {
    width: 200px;
    height: 200px;
    border: 2px solid yellow;
    border-top: 0px;
    position: relative;
}

.line {
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    transform: rotate(0deg);
    z-index: 10;
    background: red;
    position: absolute;
    animation: anim 6s ease-in-out forwards;
}

@keyframes anim {
    100% {
        transform: rotate(90deg) translate(-50%,-50%);
    }
}

HTML 部分 #

<div class="container">
    <div class="box">
        <div class="line"></div>
    </div>
</div>

问题根因 #

原有代码有两个核心错误：

• 没有设置旋转原点：CSS transform 默认以元素自身中心为旋转原点，旋转时线条会绕中点转动，无法固定在盒子左上角顶点旋转
• 旋转后的平移逻辑错误：transform 中变换函数的执行顺序是从右到左，且旋转后元素坐标轴会同步旋转，随意添加translate(-50%,-50%)会加剧线条错位

修复方案 #

只需要修改.line样式和关键帧动画即可：

1. 给.line添加transform-origin: left top;，将旋转原点固定在线条左上角（也就是盒子的左上角顶点，和预期旋转轴完全匹配）
2. 删除关键帧中多余的平移属性，旋转90度后线条会自然贴合左侧边框

修复后核心代码 #

.line {
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    z-index: 10;
    background: red;
    position: absolute;
    /* 固定旋转原点为左上角 */
    transform-origin: left top;
    animation: anim 6s ease-in-out forwards;
}

@keyframes anim {
    100% {
        /* 仅需要旋转90度即可，无需额外平移 */
        transform: rotate(90deg);
    }
}

效果说明 #

• 动画初始：红色线条刚好填补盒子顶部空缺的边框位置，和左右两侧黄色边框顶端无缝衔接
• 动画过程：线条绕盒子左上角顶点顺时针平滑转动，不会出现偏移
• 动画结束：红色线条完全贴合盒子左侧边框，长度和盒子高度完全匹配，和上下端黄色边框无缝衔接

内容的提问来源于stack exchange，提问作者Myth Vince