CSS - пиксель идеального гамбургер анимация

Question

Что у меня есть: https://jsfiddle.net/f6z1km3k/1/ Что мне нужно после того, как: парение (со значениями, которые имеют смысл - не только из глаз!) HTML:

.header-hamburger:hover span:nth-child(1) { 
     transform: rotate(45deg) 
    } 

    .header-hamburger:hover span:nth-child(2) { 
     transform: scaleX(0); 
     opacity: 0; 
    } 

    .header-hamburger:hover span:nth-child(3) { 
     transform: rotate(-45deg) 
    } 

Answer 1

I немного изменили ваш стиль.

Я двигаюсь пролетах 6px, так как теперь каждый пролет 3px высоко и пустое пространство также 3px

html { 
 
    box-sizing: border-box; 
 
} 
 

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

 
body { 
 
    margin: 0; 
 
} 
 

 
.header-hamburger { 
 
    height: 15px; 
 
    width: 20px; 
 

 
    background: #ff0000; 
 
    position: relative; 
 
    top: 120px; 
 
    left: 120px; 
 
    transform: scale(10, 10); 
 
} 
 

 
.header-hamburger span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 3px; 
 
    width: 100%; 
 
    background: #000; 
 
    transition: 250ms; 
 
    transition-property: transform, opacity; 
 
} 
 

 
.header-hamburger span:nth-child(1) { 
 
    top: 0px; 
 
    transform-origin: center center; 
 
} 
 

 
.header-hamburger span:nth-child(2) { 
 
    top: 6px; 
 
    transform-origin: left center; 
 
} 
 

 
.header-hamburger span:nth-child(3) { 
 
    top: 12px; 
 
    transform-origin: center center; 
 
} 
 

 

 

 
.header-hamburger:hover span:nth-child(1) { 
 
    transform: translateY(6px) rotate(45deg); 
 
} 
 

 
.header-hamburger:hover span:nth-child(2) { 
 
    transform: scaleX(0); 
 
    opacity: 0; 
 
} 
 

 
.header-hamburger:hover span:nth-child(3) { 
 
    transform: translateY(-6px) rotate(-45deg) 
 
}

<div class="header-hamburger"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

Answer 2

Модифицированный как этот

.header-hamburger span:nth-child(1) { 
     top: 0px; 
     transform-origin: left center; 

    } 

    .header-hamburger:hover span:nth-child(1) { 
     transform: rotate(36deg); 
     right: -2px; 
    } 

.header-hamburger:hover span:nth-child(3) { 
    transform: rotate(-36deg); 
    right: -2px; 
} 

.header-hamburger span:nth-child(3) { 
    top: 12px; 
    transform-origin: left center; 
}