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 class="move"> <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!
