Created
May 24, 2020 22:18
-
-
Save FlorianWendelborn/1f3a47e06ce775740cb75cffb8e62c04 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Shitty Hack to Reverse Children in CSS Without Flex-Direction</title> | |
| <style> | |
| body { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #111; | |
| } | |
| * { | |
| transition: all 1.5s ease-in-out; | |
| } | |
| .parent { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .parent > * { | |
| padding: 5px 10px; | |
| } | |
| .shitty-rotation-hack, | |
| .shitty-rotation-hack > * { | |
| /* could be 180deg but 360deg+180deg is fancier with the animation */ | |
| transform: rotate(540deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="parent" style="background-color: #DDDDDD"> | |
| <div style="background-color: #85144b">First Child</div> | |
| <div style="background-color: #FF4136">Second Child</div> | |
| <div style="background-color: #FF851B">Third Child</div> | |
| <div style="background-color: #FFDC00">Fourth Child</div> | |
| <div style="background-color: #2ECC40">Fifth Child</div> | |
| </div> | |
| <script> | |
| setInterval( | |
| () => | |
| document | |
| .querySelector("div") | |
| .classList.toggle("shitty-rotation-hack"), | |
| 5000 | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment