A simple article written in plain HTML with has the flip change. If you click on the hamburger menu, the article will rotate 45 degrees. It’s a nice transformation that is created thanks to adding to a nav the “show-nav” CSS style. But that CSS selector “snow-nav” is not alone it’s added to a different part of the page. Because, the changes affect the navbar, the container of the article and the circle. So, the CSS that make the changes are the following:

.container.show-nav {
    transform: rotate(-20deg);
}
.container.show-nav .circle {
    transform: rotate(-70deg);
}
.container.show-nav + nav li {
    transform: translateX(0);
    transition-delay: 0.3s;
}

These selectors are used when the user clicks on the hamburger menu. When it happens, and event listener is the listener for the click event. When int happens for the first time it adds then we open the article, and with the second one we close it. As you can see in the following JavaScript code:

const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')

open.addEventListener('click', () => container.classList.add('show-nav'))
close.addEventListener('click', () => container.classList.remove('show-nav'))

You can see the code in this GitHub Repository: 03.rotating_navigation and the demo of the project is here: Rotating Navigation