努力在 CSS 中通过旋转、变换原点和变换持续时间来获得平滑的运动

如何解决努力在 CSS 中通过旋转、变换原点和变换持续时间来获得平滑的运动

我在 CSS 旋转和变换原点方面遇到了一些问题。我有“视频信用”这个词，当用户点击它们时，我希望它们顺时针缓慢旋转 90 度（有点漂亮地掉下来），然后垂直结束。 话在完美的位置结束，但轨迹却很诡异。单词有点跳到右上角，然后突然移动到最终位置。我已经玩了很长时间了，但无法让它们按照我想要的方式很好地倒下。它不断地以随机的方式跳来跳去。有人可以帮忙吗？这是 CSS 和 jQuery。

#video-credits {
    position: relative;
    cursor: pointer;
    z-index: 7;
    padding-top: 3rem;
    padding-bottom: 1rem;
    font-size: 1.3rem;
}

#video-credits.active {
    transform: rotate(90deg);
    color: var(--color-blue);
    transform-origin: 0.6rem 4rem;
    transition-duration: 1s;
}

$(document).ready(function() {
    $("#video-credits").click(function(){
        $("#video-credits").toggleClass("active");
    });
});

我在这里重新创建了它。它在 jsfiddle 中的作用与在我的网站上类似，但在网站上它以某种方式跳得更远。

https://jsfiddle.net/of6mqkxL/13/

如果有人知道发生了什么就好了。谢谢！