I'm trying to create an animation where an acronym is displayed horizontally in the middle of the screen and then flips vertically. The challenge I'm facing is rotating individual letters once they are vertical so that the text reads from top to bottom instead of left to right.
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<style>
.move{
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
}
.move span
{
position: relative;
animation: rotate 5s ease 0s normal forwards;
}
@keyframes mover {
0.0%{
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100%{
transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
}
}
@keyframes rotate
{
0.0%{
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100%{
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
</style>
</head>
<body>
<CENTER>
<h2 class="move">
<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>
</h2>
</CENTER>
</body>
</html>
I'm looking for a way to make all the letters flip to the correct orientation (left to right) at the end while still remaining vertical.
Something like this:
L
E
M
O
N
Any help would be greatly appreciated!