So I have an acronym that is displayed horizontally in the middle of the screen then an animation plays the flips is vertically. The only problem is I can't get it to rotate individual letters once it is made vertically so the text is all top to bottom rather then left to right.
Below is what I currently have: https://noahark.w3spaces.com/saved-from-Tryit-2022-04-29.html
<!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 >
<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>
</h2>
</CENTER>
</body>
</html>
Basically just need all the letters to flip to correct orientation (Left to right) at end while still remain vertical.
Like this
L
E
M
O
N
All help is very appreciated!
CodePudding user response:
This snippet is an exact copy of yours except the spans are made inline-block so they obey the transform:
<!DOCTYPE html>
<html>
<head>
<style>
.move {
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
}
.move span {
position: relative;
display: inline-block;
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 >
<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>
</h2>
</CENTER>
</body>
</html>