Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
3.1 kB · 82 lines
MDX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283---slug: jheys-exploding-layerstitle: "Jhey's exploding layers"tags: [CSS]pubDate: 2025-03-06bskyPostId: "3ljphoefymc2l"---
import ExplodingLayers from "../../components/ExplodingLayers.astro";
So I was looking at some of CSS rock star [Jhey Tompkins](https://jhey.dev/) work, when I had a [_Hal fixing a light bulb_](https://www.youtube.com/watch?v=AbSehcT19u0&ab_channel=VinnieFarsheds) moment;I was trying to implement and configure his glowing cards, when I realized how much was going on in that demo.Then I looked for a simpler version of it, found none, and got the idea that I could make one myself. And why not use the 'exploding layers' technique to break down the layers and pseudo-elements, like he does in his full demo? So here we are, exploding/3D layers with CSS.
That's the good thing about writing your own blog — you don't have to fix the light bulb if you'd rather work on the car instead.
## The example
Jhey uses the 'exploding layers' technique to explain layered HTML elements, which is a good use case.I'll use a similar example, one which I showcased in a previous post of mine about making [animated gradient borders](/animating-gradient-border/).I won't dive into the details of that technique here — you can check out the other post for a more in-depth explanation. In essence, it involves layering two or more elements to create a complex border effect.
<ExplodingLayers />
## The code
The markup is extremely simple, simply an outer element with an inner element.
```html<div class="outer"> <div class="inner"></div></div>```
Now for the CSS, the trick is actually also quite simple. We need to layer the elements and make the inner element overflow slightly.We do this by using absolute positioning, and inset on the inner element to make it wider than the outer.We achieve the 3D effect by rotating the outer element on the x and z axis, which we apply when the explode class is added.Now in order for the 3D effect to apply to any child elements we use `transform-style: preserve-3d;`,which ensures that whatever rotations we apply to the parent, will also affect the child.The last piece is to add a secondary transform on the child element, moving it back by reducing its z value.Add a bit of delay to the transforms to make them apply nicely in steps.
```css.outer { /* Basic styling */ background-color: rgb(0, 0, 0); width: 20rem; height: 10rem; border-radius: 8px;
/* 3D exploding styling */ transition: transform 1.2s cubic-bezier(0.15, 0.75, 0.27, 0.89); transform-style: preserve-3d;
&.explode { transform: rotateX(60deg) rotateZ(25deg);
.inner { transform: translate3d(0, 0, -100px); transition-delay: 1.4s; } }
&:not(.explode) { transition-delay: 1.4s; }}
.inner { inset: -2px; border-radius: 8px; background: linear-gradient( 60deg, rgb(104, 255, 215), rgb(255, 163, 178), rgb(246, 78, 0) ); position: absolute; transform: translate3d(0, 0, -1px); transition: transform 1.5s cubic-bezier(0.2, 0.71, 0.16, 0.92);}```