JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="isContainerRotated" checked />
<label for="isContainerRotated">Container is rotated <small>scale(-1, 1)</small></label>
<br>
<input type="checkbox" id="isItemRotated" checked />
<label for="isItemRotated">Items are rotated <small>scale(-1, 1)</small></label>
<br>
<input type="checkbox" id="isContainerScrollable" checked />
    <label for="isContainerScrollable">Container is scrollable <small>overflow:auto</small></label>

<ul class="container">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
    <li class="item">Item 5</li>
    <li class="item">Item 6</li>
    <li class="item">Item 7</li>
    <li class="item">Item 8</li>
    <li class="item">Item 9</li>
    <li class="item">Item 10</li>
    <li class="item">Item 11</li>
    <li class="item">Item 12</li>
</ul>

CSS

body {
    font-family: sans-serif;
    perspective: 1500px;
}

label:hover {
    cursor: pointer;
    text-decoration: underline;
}

.container {
    list-style: none;
    width: 400px;
    margin-top: 40px;
    padding: 10px;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    /* overflow: auto; */
    /* transform: rotateY(180deg); */
    transition: transform 0.5s;
}

.item {
    display: inline-block;
    padding: 15px 5px;
    background: #00A3DF;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    transition: transform 0.5s;
    
    /* transform: rotateY(180deg); */
}
.item:hover {
    background-color: #000;
}


#isContainerRotated:checked ~ .container { 
    transform: scale(-1, 1);
}

#isContainerScrollable:checked ~ .container { 
    overflow: auto;
}

#isItemRotated:checked ~ .container li { 
    transform: scale(-1, 1);
}