css 만으로 가로스크롤만들기

rotate를 통해 약간의 css 트릭을 이용하여 손쉽게 가로 스크롤을 만들수있다.

    <div class="outer-wrapper">
      <div class="wrapper">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
      </div>
    </div>

이런식으로 두개의 wrapper를 만들어준후,

.slide {
	width: 100vw;
	height: 100vh;
      }
.wrapper {
	display: flex;
        flex-direction: row;
        width: 400vw;
        transform: rotate(90deg);
        transform-origin: top left;
      }
.outer-wrapper {
        width: 100vh;
        height: 100vw;
        transform: rotate(-90deg);
        transform-origin: top left;
        overflow-y: scroll;
        overflow-x: hidden;
        position: absolute;
      }

이런식으로 outer-wrapper에게 width:100vh, height:100vw 이런식으로 값을 반대로 주고 -90deg만큼 회전시켜주고, wrapper를 슬라이드아이템의 넓이 값만큼의 값을 주고, 90deg로 회전시키게되면 아래와같이만들어진다.

하지만, 화면을 보게되면 아무것도 나오지않는데, rotate때문에 위치가 변경되어 translate로 옮겨주기만 하면된다. 그리고 스크롤바를 숨겨 더욱 자연스럽게 만들어주면된다.

.outer-wrapper {
	...
        transform: rotate(-90deg) translateX(-100vh);
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      ::-webkit-scrollbar {
        display: none;
      }
.wrapper {
	...
        transform: rotate(90deg) translateY(-100vh);
      }