Site with horizontal scrolling

Question

Good, I have to make a site as horizontal scroll with this,(the site I passed is only to exemplify the scrolling, not the effects) but I have no idea how to do it, I did a good search before asking the question here.

As I know it is not an easy subject to "help/teach" I would like you to help me with at least an idea of how to do it. I have medium/advanced knowledge in html/css and js. But I’ve never made a site like this.

I hope you help me.

Answer 1

Thanks! I ended up getting!

body {
  margin:0;
  font-family:Georgia;
}
#container .box {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:relative;
}
#container .box > div {
  width:100px;
  height:100px;
  font-size:96px;
  color:#FFF;
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0 0 -50px;
  line-height:.7;
  font-weight:bold;
}
#container {
  overflow-y:scroll;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  font-size:0;
}

.primeiro {
  background-color: #45CCFF;
}
.segundo {
  background-color: #49E83E;
}
.terceiro {
  background-color: #EDDE05;
}
.quarto {
  background-color: #E84B30;
}

<div id="container">
  <div id="container2">
    <div class="box primeiro"><div>1</div></div>
    <div class="box segundo"><div>2</div></div>
    <div class="box terceiro"><div>3</div></div>
    <div class="box quarto"><div>4</div></div>
  </div>
</div>