Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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
You can’t perform that action at this time.