Почему span::after и span::before не реагируют на анимацию при клике?

Question

Хочу сделать кнопку для бургер-меню с помощью jquery и css. Почему span::before и span::after не реагируют на нажатие по кнопке? Я в стилях добавил им transform : rotateY(45deg) и transform : rotateY(-45deg) соответственно, но поворачиваться они не хотят, помогите понять, в чем дело.

Разметка и стили:

$(function(){
$(".header__btn").click(function(e){
        $(".header__btn").toggleClass("header__btn--active");
        $(".header__menu").toggleClass("header__menu--active");
    });
});

.header{
    height: 100vh;
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    right: 0;
}

.header__top {
    display: flex;
    justify-content: space-between;
}

.header__btn {
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    position: relative;
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all .5s;
}

.header__btn  span {
    width: 36px;
    height: 2px;
    background-color: #fff;
    position: relative;
    align-self: center;
    transition: all .5s;
}

.header__btn span::before, .header__btn span::after {
    position: absolute;
    content: "";
    width: 36px;
    height: 2px;
    background-color: #fff;
}


.header__btn span::before {
    left: 0;
    top: -8px;
}

.header__btn span::after {
    top: 8px;
    left: 0;
}

.header__btn.header__btn--active{
    border: none;
    z-index: 3;
}

.header__btn.header__btn--active span {
    background-color: transparent;
    z-index: 3;
}

.header__btn.header__btn--active span::before{
    transform: rotateY(45deg);
    z-index: 3;
}

.header__btn.header__btn--active span::after{
    transform: rotateY(-45deg);
    z-index: 3;
}
.header__menu {
    background-color: #0b0b0b;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: all .5s;
    transform: translateY(-300%);
}

.header__menu.header__menu--active{
    transform: translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
        <div class="container">
            <div class="header__top">
                <div class ="header__logo">
                    <a href="#" class="header__logo-link">
                        <img src="images/header/logo.png" class="header__logo-img">
                    </a>
                </div>
                <button type="button" class="header__btn"><span></span></button>
            </div>
            </header>

Answer 1

Ваша ошибка была в том, что вы использовали поворот относительно оси Y - rotateY, а вам нужно было просто использовать rotate.
Также я бы не использовал before/after, неудобно.

const header__btn = document.querySelector('.header__btn');
const header__menu = document.querySelector('.header__menu');

header__btn.addEventListener('click', (e) => {
  header__btn.classList.toggle('active');
  header__menu?.classList.toggle('active');
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  outline: none;
  padding: 0;
}

.header {
  height: 100vh;
  position: absolute;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  right: 0;
}

.header__top {
  display: flex;
  justify-content: space-between;
}

.header__btn {
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0 10px;
  transition: border-color 0.2s linear;
}

.header__btn__lines {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header__btn line {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: transform 0.2s linear;
}

.header__btn line:nth-of-type(1) {
  transform: translateY(-10px);
}

.header__btn line:nth-of-type(3) {
  transform: translateY(10px);
}

.header__btn.active {
  border-color: transparent;
}

.header__btn.active line:nth-of-type(1),
.header__btn.active line:nth-of-type(3) {
  transform: translateY(0px) rotate(45deg);
}

.header__btn.active line:nth-of-type(2) {
  transform: translateY(0px) rotate(-45deg);
}

.header__menu {
  background-color: #0b0b0b;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: transform 0.2s linear;
  transform: translateY(-300%);
}

.header__menu.active {
  transform: translateY(0);
}

<header class="header">
  <div class="container">
    <div class="header__top">
      <div class="header__logo">
        <a href="#" class="header__logo-link">
          <img src="images/header/logo.png" class="header__logo-img">
        </a>
      </div>
      <button type="button" class="header__btn">
        <div class="header__btn__lines">
          <line></line>
          <line></line>
          <line></line>
        </div>
      </button>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Почему span::after и span::before не реагируют на анимацию при клике?

Ответы (1 шт):