Preview:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
background: #000;
}
h1
{
	width: 900px;
    color: #164E63;
    text-transform: uppercase;
    font-size: 4.5em;
    border: 1px dotted #FFFFFF40;
    position: relative;
    text-align: center;
}
h1::before
{
	content: attr(data-txt);
    position: absolute;
    inset:0;
    margin:auto;
    text-align:center;
    transition: 300ms ease-in-out 500ms;
}
h1>span
{
	transition:transform ease-in 500ms;
    display:inline-block;
    transform-origin: center center;
    transform: rotateY(90deg)
}
h1:hover::before
{
	opacity:0;
    transform-delay:0ms;
}

h1:hover>span 
{
	transform: rotateY(0deg);
}
</style>
</head>
<body>

<h1 data-txt="Can you see me">Code The World!</h1>
<script>
const h1 = document.querySelector("h1");
const text = h1.textContent;
h1.innerHTML = '';

text.split('').forEach((char) => {
	const span = document.createElement("span");
    if (char === ' '){
    	span.innerHTML = '&nbsp';
    }else{
    	span.textContent = char;
    }
    h1.appendChild(span);
});
</script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter