分配“translateX”值时元素丢失其“rotateZ”值 - CSS

Question

我正在处理这个测试页面。 正如您从 sn-p 中看到的那样，我将“Share”栏在 Z 轴上用transform: rotateZ(-90deg); 旋转，并用transform-origin:0 0; 向左定位。 （注意：这是我第一次使用transform-origin，也许我做错了什么（？）。

我想做的事：

当页面向上滚动时，“分享”栏应该向左移动，在视口之外，保持transform: rotateZ(-90deg); 属性，当页面向下滚动时，“分享” ”栏应重新出现在同一位置。因此，当发生转换时，它应该保持垂直移动。

问题：

当页面向上滚动并且“分享”栏移出视口时，transform: translateX(-120px); 属性将采取行动，就像从未声明过 transform: rotateZ(-90deg); 一样。

如何根据滚动事件使其在所有转换期间保持垂直“固定”？

ALSO：为什么当“分享”栏离开视口时没有overflow-x？

编辑：我尝试使用left 和right 移动它，但在这种情况下没有transition 时间。

sn-p（注意：转到 .share 元素及其样式的 css 文件的底部）

const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');


burger.addEventListener('click', () => {
  nav.classList.toggle('active');
  burger.classList.toggle('hide');
  xicon.classList.toggle('active');
});

const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
  nav.classList.toggle('active');
  xicon.classList.toggle('active');
  burger.classList.toggle('hide');
})



const header = document.querySelector('header');
let prev = window.pageYOffset;

window.addEventListener('scroll', function(){
  let current = window.pageYOffset;

  if(prev < current){
    header.classList.add('hide');
  }
  else {
    header.classList.remove('hide');
    }

    prev = current;

})


const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;

window.addEventListener('scroll', function() {
  let currentScroll = window.pageYOffset;

  if(prevScroll < currentScroll) {
    shareThing.classList.add('hide');
    icons.classList.add('hide');
  }
  else {
    shareThing.classList.remove('hide');
    icons.classList.remove('hide');
  }

  prevScroll = currentScroll;

})


let share = document.querySelector('.share');
let icons = document.querySelector('.side');

share.addEventListener('click', () => {
  icons.classList.toggle('active');
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logoandicon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: powderblue;
  padding: .7em 0;
}

.logo {
  margin-left: .5em;
}

.burger {
  margin-right: 1em;
  z-index: 2;
}

.burger.hide {
  display: none;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: verdana;
}

nav ul li {
  text-align: center;
  list-style: none;
}

nav {
  padding: 1em 0;
  line-height: 2em;
  background: lightgreen;
  display: none;
}

nav.active {
  display: block;
}

.xicon {
  position: absolute;
  right: 1em;
  display: none;
}

.xicon.active {
  display: block;
}

header {
  width: 100vw;
  position: fixed;
}

header.hide {
  display: none;
}

main {
  padding-top: 4em;
}

.one {
  width: 20px;
  height: 20px;
  background: blue;
  color: white;
}

.two {
  width: 20px;
  height: 20px;
  background: green;
  color: white;
}

.three {
  width: 20px;
  height: 20px;
  background: red;
  color: white;
}

.side {
  width: 30px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 50%;
  background: black;
  display: none;
  border-radius: 10px;
}

.side.active {
  display: flex;
}

.side.hide {
  display: none;
}

.share {
  position: fixed;
  top: 50%;
  background: black;
  color: white;
  font-family: verdana;
  font-size: 1.3rem;
  transform: rotateZ(-90deg);
  transform-origin: 0 0;
  padding: .15em 1em;
  border-radius: 10px;
  border: 1px solid white;
  transition: 1s;
}

.share.hide {
  transform: translateX(-120px);
}

<header>
    <div class="logoandicon">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" width="30px" alt="burger-icon">
      <img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <p class="share">Share</p>
    <div class="side">
      <div class="one">Fb</div>
      <div class="two">Ig</div>
      <div class="three">Tw</div>
    </div>

    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi voluptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
  </main>


<script src="main.js">

</script>

Answer 1

您的隐藏类不仅应该应用平移，还应该应用旋转，如下所示：

.share.hide {
  transform: translateX(-120px) rotateZ(-90deg);
}

Answer 2

你能用 left: -120px 代替 transform: translate(-120px) 吗？不过，您需要绝对或相对位置。当它应该出现时，设置left: 0

Answer 3

解决方案

我设法将其移出视口，同时保持transform: rotateZ() 属性和transition 时间，使用：

margin-left: -35px;.

ALSO，正如 @Zohir Salak 和 @Turnip 在上面的 cmets 中所建议的那样，将 transform: rotateZ() 与 transform: translateX() 链接在同一行上也可以。

const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');


burger.addEventListener('click', () => {
  nav.classList.toggle('active');
  burger.classList.toggle('hide');
  xicon.classList.toggle('active');
});

const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
  nav.classList.toggle('active');
  xicon.classList.toggle('active');
  burger.classList.toggle('hide');
})



const header = document.querySelector('header');
let prev = window.pageYOffset;

window.addEventListener('scroll', function(){
  let current = window.pageYOffset;

  if(prev < current){
    header.classList.add('hide');
  }
  else {
    header.classList.remove('hide');
    }

    prev = current;

})


const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;

window.addEventListener('scroll', function() {
  let currentScroll = window.pageYOffset;

  if(prevScroll < currentScroll) {
    shareThing.classList.add('hide');
    icons.classList.add('hide');
  }
  else {
    shareThing.classList.remove('hide');
    icons.classList.remove('hide');
  }

  prevScroll = currentScroll;

})


let share = document.querySelector('.share');
let icons = document.querySelector('.side');

share.addEventListener('click', () => {
  icons.classList.toggle('active');
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logoandicon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: powderblue;
  padding: .7em 0;
}

.logo {
  margin-left: .5em;
}

.burger {
  margin-right: 1em;
  z-index: 2;
}

.burger.hide {
  display: none;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: verdana;
}

nav ul li {
  text-align: center;
  list-style: none;
}

nav {
  padding: 1em 0;
  line-height: 2em;
  background: lightgreen;
  display: none;
}

nav.active {
  display: block;
}

.xicon {
  position: absolute;
  right: 1em;
  display: none;
}

.xicon.active {
  display: block;
}

header {
  width: 100vw;
  position: fixed;
}

header.hide {
  display: none;
}

main {
  padding-top: 4em;
}

.one {
  width: 20px;
  height: 20px;
  background: blue;
  color: white;
}

.two {
  width: 20px;
  height: 20px;
  background: green;
  color: white;
}

.three {
  width: 20px;
  height: 20px;
  background: red;
  color: white;
}

.side {
  width: 30px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 50%;
  background: black;
  display: none;
  border-radius: 10px;
}

.side.active {
  display: flex;
}

.side.hide {
  display: none;
}

.share {
  position: fixed;
  top: 50%;
  background: black;
  color: white;
  font-family: verdana;
  font-size: 1.3rem;
  transform: rotateZ(-90deg);
  transform-origin: 0 0;
  padding: .15em 1em;
  border-radius: 10px;
  border: 1px solid white;
  transition: 1s;
}

.share.hide {
  margin-left: -35px;
}

/*OR
.share.hide {
  transform: rotateZ(-90deg) translateX(-120px);
  } /*

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <header>
    <div class="logoandicon">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" width="30px" alt="burger-icon">
      <img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <p class="share">Share</p>
    <div class="side">
      <div class="one">Fb</div>
      <div class="two">Ig</div>
      <div class="three">Tw</div>
    </div>

    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi vol uptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta fuptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
  </main>


<script src="main.js">

</script>
</body>
</html>