CSS 滚动时旋转页面

如何解决CSS 滚动时旋转页面

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

}}

我在这里有这段代码，我正在尝试在使用维基媒体软件的网站上旋转页面。以下是用于稍微旋转视图的上述代码片段的示例：https://nonciclopedia.org/wiki/Torre_di_Pisa。 我的问题是：是否可以根据鼠标滚动来旋转页面？如果是，如何？我对 CSS 一无所知，也找不到之前发布的任何有用信息。

解决方法

你可以实现这个，但你仍然需要JS来设置滚动位置。您可以将其保存为全局变量。然后有一个用 css 处理它的小技巧 - 你已经创建了一个无限的动画设置暂停并更改延迟：

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>

我想，我是第一次在 css-tricks 上看到它，但目前有一个限制访问。不过，链接可能有用：https://css-tricks.com/books/greatest-css-tricks/scroll-animation/