{{#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/