CSS rotate page while scrolling

Question

{{#css:
body{ 
-moz-transform:rotate(2.0deg); 
-webkit-transform:rotate(2.0deg); 
transform:rotate(2.0deg);

}}

I've got this piece of code here and am trying to rotate a page on a site which uses the Wikimedia Software. Here is an exaple of the above codesnippet used to slightly rotate the view: https://nonciclopedia.org/wiki/Torre_di_Pisa. My question is: is it possible to rotate the page according to your mousescroll? And if yes, how? I have no clue about CSS and couldn't find any helpful information previously posted.

Answer 1

You can achieve this, but you still need JS to set scroll position. You can save it as a global variable. Then there is a little trick to handle it with css - you have create an infinite animation set on pause and change delay instead:

window.addEventListener(
  "scroll",
  () => {
    document.body.style.setProperty(
      "--scroll",
      window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
    );
  },
  false
);

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 500vh;
}
div {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}


code {
  font-size: 40px;
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  /* w/o these two rows there are might be some artifacts */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

<div><code>+</code></div>

I think, I've seen it on css-tricks for the first time, but there is a restricted access currently. Still, the link might be useful: https://css-tricks.com/books/greatest-css-tricks/scroll-animation/