Skip to content

Instantly share code, notes, and snippets.

@FlorianWendelborn

FlorianWendelborn/shitty-rotation-hack.html

Created May 24, 2020 22:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FlorianWendelborn/1f3a47e06ce775740cb75cffb8e62c04 to your computer and use it in GitHub Desktop.
Save FlorianWendelborn/1f3a47e06ce775740cb75cffb8e62c04 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shitty-rotation-hack.html
<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