JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<body>

<div class="horizontalScroll">
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/photo-1468014187448-46f9ba8890a2?dpr=1&auto=compres)"></div>
  </div>
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/photo-1466496224275-4cbf790b285b?dpr=1&auto=compres)"></div>
  </div>
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/photo-1437315306147-0923bdb3fc12?dpr=1&auto=compress)"></div>
  </div>
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/44/C3EWdWzT8imxs0fKeKoC_blackforrest.JPG?dpr=1&auto)"></div>
  </div>
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/photo-1481093903765-de0b1d88f1a5?dpr=1&auto=compres)"></div>
  </div>
  <div class="item">
    <div class="bg" style="background-image: url(https://images.unsplash.com/photo-1480914362564-9f2c2634e266?dpr=1&auto=compress)"></div>
  </div>
</div>

CSS

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

*,
*::after,
*::before {
  /* box-sizing: border-box; */
  overflow-x: visible !important;
}

body {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background:#111;
}

.horizontalScroll {
  width: 80vh;   /* Bildschirmhöhe 776px */
  height: 100vw;  /* Bildschirmbreite 1920px */
  overflow-y: auto;
  /* overflow-x: hidden; */
  /* background: #2E2E2E; */
  /* -webkit-transform-origin: right top; */
  transform-origin: right top;
  /* -webkit-transform: rotate(-90deg) translate3d(0, -80vh, 0); */  /* Bildschirmhöhe*/
  transform: rotate(-90deg) translate3d(0, -80vh, 0);  /* Bildschirmhöhe*/
  border: 1px dotted yellow;
}
.horizontalScroll > * {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(90deg) translate3d(0, -80vh, 0);  /* alt: -webkit-transform: rotate(90deg) translate3d(0, calc(-80vh + 5vh), 0); */ 
          transform: rotate(90deg) translate3d(0, -80vh, 0);  /* alt: transform: rotate(90deg) translate3d(0, calc(-80vh + 5vh), 0); */ 
}
.item {
  width: 100vh;  /* alt: calc(100vh - 60px BZW. 5vh); */
  height: 100vh;  /* alt: calc(100vh - 60px BZW. 5vh); */
  background: #FDFFFC;
  position: relative;
}

.item:not(:first-child) {
  margin-top: 2.5vh;  /* Abstand zwischen den Bildern */
}

.item .bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center center / cover;
  opacity: .8;
  background-blend-mode: luminosity;
}

@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}