JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll">
  Scroll
  <div id="transform">
    Transform
    <div id="sticky">Sticky</div>
  </div>
</div>

CSS

#scroll{
  overflow-y: scroll;
  height: 100px;
  border: 3px solid;
  margin-top: 50px;
}
#scroll::after {
  content: '';
  display: block;
  height: 400px;
}
#transform {
  transform: translateX(200px) rotate(90deg);
  transform-origin: 0% 0%;
  background: #ff0;
  height: 200px;
  top: 0;
  left: 100px;
  border: 3px solid;
}
#sticky {
  position: sticky;
  top: 0;
  background: #0ff;
  border: 3px solid;
}