分配了“ translateX”值后，元素会丢失其“ rotateZ”值-CSS

问题描述

我正在处理此测试页。如您从代码段中看到的，我将“ Share ”栏在Z轴上旋转，transform: rotateZ(-90deg);，并在左侧放置transform-origin:0 0;。（注意：这是我第一次使用transform-origin，也许我做错了（？）。）

我想做什么：

当页面向上滚动时，“ Share ”栏应向左移动，并保持视口transform: rotateZ(-90deg);属性；当页面向下滚动时，“ > Share ”栏应重新出现在相同位置。因此，当发生过渡时，它应保持垂直移位。

问题：

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

如何基于滚动事件使它在所有过渡期间垂直保持“ 固定”？

ALSO ：为什么“ Share ”栏超出视口时没有overflow-x？

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

代码段（注意：转到.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>

解决方法

您的hide类不仅应应用翻译，还应应用旋转，例如：

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

您可以使用left: -120px而不是transform：translate（-120px）吗？但是，您需要绝对或相对位置。并在它出现时设置left: 0

解决方案

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

margin-left: -35px;.

ALSO （如@Zohir Salak和@Turnip在上面的评论中建议的那样）也可以将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,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>

css-transforms html javascript

分配了“ translateX”值后，元素会丢失其“ rotateZ”值-CSS

问题描述

解决方法

相关问答