<div class="rect rect1"></div>
<div class="rect rect2"></div>
<div class="rect rect3"></div>

body {
  height: 4000px;
  --scroll: 0;
  overflow-x:hidden;
}

.rect {
  position: absolute;
  width: 50px;
  height: 50px;
}

.rect1 {
  background-color: hsl(calc(var(--scroll) * 0.1), 55%, 55%);
  transform: translate(calc(50vw - 50%), calc(80vh - 50%)) 
              rotate(calc(var(--scroll) * 0.5deg))
              scale(calc(calc(var(--scroll) * 0.01) + 1));
}

.rect2 {
  background-color: hsl(calc(var(--scroll) * 0.4), 55%, 55%);
  transform: translate(calc(0.1vw * var(--scroll)), calc(80vh - 50%));
}

.rect3 {
 background-color: hsl(calc(var(--scroll)), 55%, 55%);
  transform: translate(calc(90vw - calc(0.1vw * var(--scroll))), calc(100vh - 50%));
}

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll', window.scrollY);
})