<label class="menu">
    <input type="checkbox" checked>
    <div>
        <span></span>
        <span></span>
    </div>
</label>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6350574-Hamburger-switch-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

.menu {
    --front: #275EFE;
    --back: #D93757;
    --icon: white;
    perspective: 600px;
    width: 48px;
    height: 48px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    input {
        display: none;
        & + div {
            span {
                --rotateY: 0deg;
                --background: var(--front);
                transform: rotateY(var(--rotateY));
                transform-style: preserve-3d;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background: var(--background);
                backface-visibility: hidden;
                transition: transform .6s cubic-bezier(.2, .64, .48, 1.24);
                &:before,
                &:after {
                    --rotate: 0deg;
                    content: '';
                    position: absolute;
                    width: 16px;
                    height: 2px;
                    border-radius: 1px;
                    top: 50%;
                    left: 50%;
                    background: var(--icon);
                    backface-visibility: hidden;
                    transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);
                }
                &:first-child {
                    --background: var(--back);
                    &:before {
                        --rotate: -45deg;
                    }
                    &:after {
                        --rotate: 45deg;
                    }
                }
                &:last-child {
                    --rotateY: 180deg;
                    &:before {
                        box-shadow: 0 -5px 0 var(--icon), 0 5px 0 var(--icon);
                    }
                    &:after {
                        display: none;
                    }
                }
            }
        }
        &:checked + div {
            span {
                &:first-child {
                    --rotateY: -180deg;
                }
                &:last-child {
                    --rotateY: 0deg;
                }
            }
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5F9FF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}