I am looking to create a menu button labeled "menu" that rotates around using rotateX, and then changes into the text "close". Initially, I attempted to achieve this effect with text and animation, followed by text and transform. When those methods failed, I decided to create an .svg of the "close" text already flipped so that I only needed to rotate it 180 degrees.
My main issue is that either the item flips and transforms without transforming as it flips back, or it only works once and fails to function properly afterwards.
const navSlide = () => {
const menu = document.querySelector("#menu");
const nav = document.querySelector(".nav-items");
menu.addEventListener("click", () => {
nav.classList.toggle("open");
if (menu.src === './icons/menu.svg') {
menu.src = './icons/close.svg';
menu.classList.toggle('menu-flip');
} else {
menu.classList.toggle("menu-flip");
menu.src = './icons/menu.svg';
}
})
};
navSlide();#menu {
font-family: "Syne Regular", Georgia, "Times New Roman", Times, serif;
font-size: 54px;
text-decoration: none;
color: black;
position: absolute;
bottom: 0;
left: 0;
margin: 0;
line-height: 42px;
letter-spacing: -1px;
padding: 0;
border: 0;
background: none;
transform: rotateX(0deg);
transition: transform 0.2s ease-in;
&.menu-flip{
transform: rotateX(180deg);
transition: transform 0.2s ease-in;
letter-spacing: -4px;
}
}<div class="menu">
<img id="menu" src="./icons/menu.svg" alt="menu" />
</div>