Direction Aware Tiles Pure CSS – How it works

Before I start let me first tell you that this will not work on IE. You need to use a different browser (like Chrome or an updated version of Firefox or Safari) and be on a large screen, preferrably one with a cursor.

After my previous work which only used two elements to determine which side the card will flip, I’ve decided to use four this time. The four elements will detect the top, right, bottom, and left areas respectively. Therefore the boxes will now be able to flip horizontally or vertically depending from where you approach it. I provided a quick explanation of how it works and the code below.


How it works

When you check the source code below this page, you will see that there are four <a> tags before each .box div. Those tags are the ones that determine on which side the box will flip. Here’s an illustration of what they look like when I added a black background color to each tag.

You will notice that they are triangles, this is so that they don’t overlap each other. I used the clip-path property to create the shapes. When the cursor hovers over the first <a> tag, this corresponding CSS code will run:

.col a:nth-child(1):hover ~ .box {
transform: rotateX(180deg);

…which will cause .box to flip upwards. Because of the general sibling combinator ~ (tilde), I am able to manipulate their sibling .box‘s rotation. Here are for the other three tags:

Second <a> tag (right) will trigger:

.col a:nth-child(2):hover ~ .box {
transform: rotateY(180deg);

Third <a> tag (bottom) will trigger:

.col a:nth-child(3):hover ~ .box {
transform: rotateX(-180deg);

Fourth <a> tag (left) will trigger:

.col a:nth-child(4):hover ~ .box {
transform: rotateY(-180deg);

Important note

When hovering on a side, we need to remove the clip-path property and increase the z-index so that the hovered triangle turns into a square and cover the other triangles. The reason for this is so that you can move freely inside the box without triggering another flip unless your cursor leaves the div.

.col a:hover {
z-index: 3;
-webkit-clip-path: none;
clip-path: none;

Well that’s about it! Remember that this is just the basics. There is more you can do, not just flips, with the direction aware concept. There can also be different approaches. So be creative! I hope this post has helped you in any way possible.

Source code



You can also find the full code in CodePen.

Elmer Balbin

Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.

Buy me a burgerBuy me a burger

Leave a comment