メニューボタンと閉じるボタンをトグルさせるその2

kimizuka.hatenablog.com

以前つくったものが不格好だったので再度挑戦してみました。

HTML

<div class="btn">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

SCSS

body {
  background: #333;
}

.btn {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    width: 21px; height: 19px;
    overflow: hidden;
    
    .line {
        position: absolute;
        left: 0;
        width: 21px; height: 3px;
        background: #fff;
        transition: transform .2s ease-in-out;
        
        &:nth-child(1) {
            top: 0;
            transform-origin: 0 3px;
        }
            
        &:nth-child(2) {
            top: 0; bottom: 0;
            right: 0;
            margin: auto;
            transform-origin: left center;
        }
            
        &:nth-child(3) {
            bottom: 0;
            transform-origin: 0 0;
        }
    }
    
    &.on {
        .line {
            &:nth-child(1) {
                transform: rotate(45deg);
            }
                
            &:nth-child(2) {
                transform: translateX(21px);
            }
             
            &:nth-child(3) {
                transform: rotate(-45deg);
            }
        }
    }
}