为什么当我尝试在滚动时更改它时我的旋转 css 不起作用？

Question

我正在尝试在向下滚动页面时更改 h1。 我想要在左侧 Y 页面中间的一个固定位置。 怎么没修？ 课程这个词不是其他人所在的地方

 const sections = document.querySelectorAll("div") const clientTag = document.querySelector("h1.client") document.addEventListener("scroll", function () { const pixels = window.pageYOffset sections.forEach(section => { if (section.offsetTop - 60 <= pixels) { clientTag.innerHTML = section.getAttribute("data-client") } }) })

 div { height:100vh; } header { display:inline-block; position: fixed; transform:rotate(-90deg) translate(50%, 50%); -webkit-transform: translate(50%,50%) rotate(90deg); transform-origin: 78% 100%; padding:auto; margin:auto; }

 <header> <h1 class="client">work</h1> </header> <div data-client="work"></div> <div data-client="about"></div> <div data-client="curriculum"></div> <div data-client="contact"></div>

Answer 1

transform-origin是使标题跳跃这么多的原因。 您可以将其移除，使其采用默认值 ( center ) 并始终相对于其中心旋转，该中心通过设置top和left属性来定义。

 const sections = document.querySelectorAll("div") const clientTag = document.querySelector("h1.client") document.addEventListener("scroll", function () { const pixels = window.pageYOffset sections.forEach(section => { if (section.offsetTop - 60 <= pixels) { clientTag.innerHTML = section.getAttribute("data-client") } }) })

 div { height:100vh; } header { display: block; position: fixed; transform: translate(-50%, -50%) rotate(-90deg); -webkit-transform: translate(-50%, -50%) rotate(-90deg); top: 50%; left: 20px; }

 <header> <h1 class="client">work</h1> </header> <div data-client="work"></div> <div data-client="about"></div> <div data-client="curriculum"></div> <div data-client="contact"></div>