Word reverse, Check this small cool effect

July 18, 2024 (6mo ago)

Word-reverse

<div id="flip-container">
        <p class="flip-text" data-text="okuso.uk">okuso.uk</p>
</div>
#flip-container {
    display: inline-block;
    perspective: 1000px;
}
 
.flip-text {
    display: inline-block;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
 
.flip-text:hover {
    transform: rotateY(180deg);
}
 
.flip-text span {
    display: inline-block;
    transition: transform 0.6s;
    transform: rotateY(0deg);
    transform-origin: 50% 50%;
}
 
.flip-text:hover span {
    transform: rotateY(180deg);
}
document.addEventListener("DOMContentLoaded", () => {
    const flipText = document.querySelector(".flip-text");
    const text = flipText.dataset.text;
    let wrappedText = '';
 
    for (const char of text) {
        wrappedText += `<span>${char}</span>`;
    }
 
    flipText.innerHTML = wrappedText;
});