Блог

Главная - Вопросы по программированию - Элемент теряет значение «rotateZ» при присвоении значения «translateX» — CSS

Элемент теряет значение «rotateZ» при присвоении значения «translateX» — CSS

#javascript #html #css #css-transforms

#javascript #HTML #css #css-преобразования

Вопрос:

У меня есть эта тестовая страница, над которой я работаю. Как вы можете видеть из фрагмента, у меня панель «Поделиться» повернута по оси Z с помощью transform: rotateZ(-90deg); и расположена влево с помощью transform-origin:0 0; . (Примечание: я использую это впервые transform-origin , и, возможно, я сделал что-то не так (?)).

Что я хочу сделать:

При прокрутке страницы вверх панель «Поделиться» должна перемещаться влево, за пределы области просмотра, сохраняя transform: rotateZ(-90deg); свойство, а при прокрутке страницы вниз панель «Поделиться» должна снова появиться в том же положении. Поэтому он должен оставаться сдвинутым по вертикали, когда происходят переходы.

Проблема:

Когда страница прокручивается вверх и панель «Поделиться» перемещается за пределы области просмотра, transform: translateX(-120px); свойство выполняет действие, как если бы transform: rotateZ(-90deg); никогда не было объявлено.

Как я могу заставить его оставаться вертикально «фиксированным» во время всех переходов на основе событий прокрутки?

ТАКЖЕ: почему нет, overflow-x когда панель «Поделиться» выходит из окна просмотра?

Редактировать: я пытался переместить его с помощью left и right , но в этом случае нет transition времени.

Фрагмент (примечание: перейдите к нижней части файла css для .share элемента и его стиля)

 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>

Комментарии:

1. Ваша проблема в том, что вместо переопределения преобразования вы должны объединить преобразования в цепочку transform: rotateZ(-90deg) translateX(-120px);

2. Я не могу связать их в цепочку, потому что один возникает при прокрутке вверх, а другой — при прокрутке вниз.

3. Почему бы не использовать left и right свойства для перемещения его в область просмотра и из нее?

4. Я сделал, но в этом случае нет времени перехода

5. «Я не могу связать их в цепочку, потому что один возникает при прокрутке вверх, а другой — при прокрутке вниз» , вы все равно сможете связать их в цепочку: jsfiddle.net/6spyd23z/1

Ответ №1:

Ваш класс hide должен применять не только перевод, но и вращение, например:

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

Ответ №2:

Можете ли вы использовать left: -120px вместо transform: translate(-120px)? Однако для этого вам нужна абсолютная или относительная позиция. И когда оно должно появиться, установите left: 0

Ответ №3:

РЕШЕНИЕ

Мне удалось переместить его из области просмотра, сохранив transform: rotateZ() скорость и transition время, используя:

 margin-left: -35px;.

ТАКЖЕ, как @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, 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>

Комментарии:

1. Все еще не понимаю, почему нет переполнения.

2. Куда вы это добавили?