A CSS Slinky in 3D? Challenge Accepted!

A CSS Slinky in 3D? Challenge Accepted!

css-tricks.com css-tricks.com3 months ago in #Dev Love60

Braydon Coyer not too long ago introduced a per thirty days CSS artwork problem. He in reality had reached out to me about donating a replica of my e book Move Things with CSS to make use of as a prize for the winner of the problem — which I used to be more than pleased to do! The first month’s problem? Spring. And when considering of what to make for the problem, Slinkys instantly got here to thoughts. You know Slinkys, proper? That vintage toy you knock down the steps and it travels with its personal momentum. A slinking Slinky Can we create a Slinky strolling down stairs like that in CSS? That’s precisely this sort of problem I really like, so I assumed lets take on that in combination in this text. Ready to roll? (Pun supposed.) Setting up the Slinky HTML Let’s make this versatile. (No pun supposed.) What I imply by way of this is we would like so that you can keep an eye on the Slinky’s habits via CSS customized homes, giving us the versatility of swapping values after we want to. Here’s how I’m surroundings the scene, written in Pug for brevity: – const RING_COUNT = 10; .container .scene .aircraft(genre=`–ring-count: ${RING_COUNT}`) – let rings = 0; whilst rings < RING_COUNT .ring(genre=`--index: ${rings};`) - rings ; Those inline customized homes are a very easy manner for us to replace the collection of rings and can come in at hand as we get deeper into this problem. The code above provides us 10 rings with HTML that appears one thing like this when compiled: The preliminary Slinky CSS We’re going to want some kinds! What we would like is a three-d scene. I’m aware of a few issues we would possibly need to do later, in order that’s the considering at the back of having an additional wrapper part with a .scene magnificence. Let’s get started by way of defining some homes for our “infini-slinky” scene: :root { --border-width: 1.2vmin; --depth: 20vmin; --stack-height: 6vmin; --scene-size: 20vmin; --ring-size: calc(var(--scene-size) * 0.6); --plane: radial-gradient(rgb(Zero Zero 0 / 0.1) 50%, clear 65%); --ring-shadow: rgb(Zero Zero 0 / 0.5); --hue-one: 320; --hue-two: 210; --blur: 10px; --speed: 1.2s; --bg: #fafafa; --ring-filter: brightness(1) drop-shadow(Zero Zero Zero var(--accent)); } These homes outline the traits of our Slinky and the scene. With nearly all of 3-D CSS scenes, we’re going to set transform-style around the board: * { box-sizing: border-box; transform-style: preserve-3d; } Now we'd like kinds for our .scene. The trick is to translate the .aircraft so it looks as if our CSS Slinky is transferring infinitely down a flight of stairs. I needed to mess around to get issues precisely the best way I would like, so undergo with the magic quantity for now, as they’ll make sense later. .container { /* Define the scene's dimensions */ top: var(--scene-size); width: var(--scene-size); /* Add intensity to the scene */ remodel: translate3d(0, 0, 100vmin) rotateX(-24deg) rotateY(32deg) rotateX(90deg) translateZ(calc((var(--depth) var(--stack-height)) * -1)) rotate(0deg); } .scene, .aircraft { /* Ensure our container absorb the total .container */ top: 100%; width: 100%; place: relative; } .scene { /* Color is bigoted */ background: rgb(162 25 230 / 0.25); } .aircraft { /* Color is bigoted */ background: rgb(25 161 230 / 0.25); /* Overrides the former selector */ remodel: translateZ(var(--depth)); } There is a good bit occurring right here with the .container transformation. Specifically: translate3d(0, 0, 100vmin): This brings the .container ahead and forestalls our 3-D paintings from getting bring to an end by way of the frame. We aren’t the usage of standpoint at this...

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply