<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:. | | | Filename : YS_scale-rotation.html | | Author : Yevheniia Shyrchenko | | | ::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @font-face { font-family: Konsole; src: url(../_fonts/Konsolev1.1-VF.ttf); } body { font-family: Konsole; font-size: 4vh; overflow: hidden; height: 100vh; } @keyframes rotate-columns { /* defines how the text is rotated and enlarged at a certain point in the animation */ 0% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(180deg) scale(3); } 100% { transform: rotateY(360deg) scale(1); } } .column-container { display: flex; justify-content:space-evenly; align-items: center; height: 100vh; font-family: 'Konsole'; } .column { /* defines how the animation will progress over one cycle of its duration */ display: flex; flex-direction: column; align-items: center; animation: rotate-columns 6s linear infinite; } .box { /* defines how the boxes look */ background-color: black; padding: 10px; border-radius: 0px; } .column p { /* defines how the glyphs are shown */ font-size: 3em; margin: 0; letter-spacing: 0; color: white; } .column:nth-child(2) { /* defines when the animation will start */ animation-delay: 1s; } .column:nth-child(3) { animation-delay: 2s; } .column:nth-child(4) { animation-delay: 3s; } .column:nth-child(5) { animation-delay: 4s; } </style> <title>Your Page Title</title> </head> <body> <div class="column-container"> <div class="column"> <div class="box"><p>H</p></div> </div> <div class="column"> <div class="box"><p>E</p></div> </div> <div class="column"> <div class="box"><p>L</p></div> </div> <div class="column"> <div class="box"><p>L</p></div> </div> <div class="column"> <div class="box"><p>O</p></div> </div> </div> </body> </html>