(CSS) 想出一种使用 translateX 获取父元素坐标的方法

如何解决(CSS) 想出一种使用 translateX 获取父元素坐标的方法

我正在尝试使用 css 设置一个选取框，这就是我目前所拥有的：

.marquee {
height: 50px;
width: 400px;
overflow:hidden;
background: #F1DDBA;
color: #333;
border: 1px solid #4a4a4a;
}
        
.marquee p{
font-size:30px;
margin:auto;
width:max-content;
height: 100%;
line-height: 50px;
animation: scroll-left 10s linear infinite;
                }
.marquee p:hover{
    animation-play-state:paused;
}
@keyframes scroll-left{
    from{       transform:translatex(100%);
    }
    to{
        transform:translatex(-100%)
    }
}

<div class="marquee">
    <p>some random text overflowing,some random text overflowing,some random text overflowing</p>
</div>

我想要做的是让文本始终在选取框的右边缘开始滚动。现在

from {transform:translatex(100%);

在滚动文本的末尾启动动画，如果文本太长或太短都无济于事。像嵌套变换之类的东西来获得选框 div 的最右边会非常方便。有没有办法解决这个问题？