滚动条位置默认在下方，如何调整在上方

通过翻转属性,scroll-container 父旋转180度，使滚动条在最上方
再通过内容区块content再旋转180度，使内容恢复原状，这样就即保证了滚动条在上方，又保证了内容正常

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Horizontal Scroll Bar at Top</title>
    <style>
        .scroll-container {
            width: 300px;
            height: 200px;
            overflow-x: scroll; /* 启用水平滚动条 */
            position: relative; /* 相对定位 */
            background-color: #f1f1f1; /* 背景颜色 */
        }

        .content {
            display: flex; /* 使用 Flexbox 布局 */
            flex-wrap: nowrap; /* 防止换行 */
            width: 1000px; /* 设置内容区域的宽度 */
            height: 100%; /* 设置内容区域的高度 */
        }

        .item {
            margin-right: 10px; /* 项目之间的间距 */
            padding: 10px;
            background-color: white; /* 项目背景颜色 */
            border: 1px solid #ccc; /* 边框 */
            text-align: center; /* 文字居中 */
            min-width: 100px; /* 最小宽度 */
        }

        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            height: 10px; /* 滚动条高度 */
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1; /* 轨道背景颜色 */
        }

        ::-webkit-scrollbar-thumb {
            background: #888; /* 滚动条颜色 */
            border-radius: 5px; /* 边框圆角 */
            position: absolute;
            top: 0; /* 将滚动条移到顶部 */
        }
        .scroll-container {
            transform: rotate(180deg);
        }
        .content {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="content">
            <!-- 内容区域 -->
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
            <div class="item">Item 5</div>
            <div class="item">Item 6</div>
            <div class="item">Item 7</div>
            <div class="item">Item 8</div>
            <div class="item">Item 9</div>
            <div class="item">Item 10</div>
            <div class="item">Item 11</div>
            <div class="item">Item 12</div>
            <div class="item">Item 13</div>
            <div class="item">Item 14</div>
            <div class="item">Item 15</div>
            <div class="item">Item 16</div>
            <div class="item">Item 17</div>
            <div class="item">Item 18</div>
            <div class="item">Item 19</div>
            <div class="item">Item 20</div>
        </div>
    </div>
</body>
</html>

滚动条位置默认在下方，如何调整在上方 ​

滚动条位置默认在下方，如何调整在上方