
<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;
});