Today's day number 26 we're building something really exciting.

But first of all, you might notice that my microphone is in a really weird position.

I realized that this road extendable that you could mount to your desk it's really versatile.

It's quite nice, but this whole time I've been hanging it in front of my face, which means I can't actually see my screen that well, which makes it a little bit difficult to record coding tutorials.

So I maneuvered it in this really unusual, awkward looking position, and I thought, Hey, I'll give it a try for this round.

So here we go over here in my browser, still addressing this thing.

Not gonna promise for keeping to this way, folks.

All right, we have got the day 26 30 layers and what am I talking about when I say three D layers?

Well, let me show you here to you right now.

This might look like just like a normal the normal mock up.

But the fact is that I created it in photo shop using SPG format, which means it's a vector format which means it's infinitely scalable in super sharp, regardless of your screen size and if you make it bigger, smaller.

So I created this mock up.

I included the Photoshopped document in the Image folder as well, so maybe you might want to see and play around with it.

But this is what happens when I hover over this mock up.

Watch this.

That's super cool.

So you might already think that's amazing.

I want to know how to make that.

Or you might think I have some ideas and how I want to use that.

Essentially, the reason why we're doing this is one.

It's a really big challenge that we're doing a lot of really interesting maneuvering using different different planes the X Y and Z planes using transitions, transforms and animations and all that sort of thing.

So it's a challenging little task.

It's a super impressive way to display almost anything in a showcase for Matt on your website.

So a mock up, a blueprint, a wire frame, even images or, you know, different elements.

It's really exciting now.

I wouldn't use it as a functional piece like for navigating or something like that, but to display something in an impressive manner to show the layers of your work or something like that.

This is the way to do it.

Now look at it one more time.

Show you what's happening.

So we have a back layer here, and then we have a middle layer right here.

A top layer of these three of the six circles and this text down here, this mock up text wire frame text, just much of lines that mimics text.

And then we have the, uh these two icons here on the tippy top, I call it, and so in one layer, just looking at it Street, it looks like a normal mock up, but when you hover over it, it extends out and shifts.

It changes.

And it's using a three d transformation in CSS three.

So why don't we jump in and get started over here in the code editor, we have the day 26 3 d layers.

I have all of the assets their index sandbox final and the Image folder, which includes SPG files, which are not image files.

Technically, they're actually SDG files, which stands for scalable vector graphic.

So it's not an image But you can add it to your websites and Web pages using the image tag.

So it it sees it as an image.

But the file actually isn't a technical true image.

And then I have the layers that PSD there.

If you want to open it up a photo shop and check it out, play around with it and do whatever.

So here's the markup right here in a div with the class of layers.

I have four image tags in there.

There they are commented out because you will see, once I uncommon tit it creates a really, really large vector graphics that take up most of the page after scroll down.

So for visualization purposes showing you the demo, I didn't want you to see that.

So now go ahead and uncommon that and then you will have your four images scaleable vector graphics.

Now, if you check it on the browser, it's gonna look really bad.

Massive files like this, but we're gonna be using this and manipulating these in CSS to make them work.

Okay, so now that we've got those SPG images SPG graphics in there, what we're gonna do is head over to our sandbox.

We're gonna get started with our coding adventure for this three D layer effect.

Let's start off by selecting layers and then we're gonna tell it position relative a minimum height of now.

It could be specific number.

Gonna say 6 40 pixels on that simply because the vector graphic here.

If I were to open it, you can see here the width and the height are this by default.

That's really large.

So I'm gonna scale that down to about 1/3 of the size.

Now, it's a rough calculation, but I basically took these and divided them by three.

And that's essentially the numbers were using.

I rounded it up a little bit just so that they were easy numbers to calculate.

Max width is going to be 360.

So now we're gonna have the proper ratio in this parent layer.

And now next we're gonna do is we're gonna say layers and then select the image tags were gonna say position absolute, because we're gonna be moving them all around Max Witt.

It's going to be 100%.

So it's going to it's gonna fill out the content the parent, the parent container and Now we're gonna say height is 100%.

It's gonna fill out that parent container, uh, height wise as well.

Lengthwise, vertical eyes, whatever transition we're gonna say all these 1600 milliseconds.

And that's important because we're gonna be doing a transition to give us that animated effect.

Now we're gonna say transform style and we're gonna say preserve three D because we're gonna have the transform we're gonna do some transforming and some shifting and perspective.

You know, three D animations and maneuvering and this preserves that three d plane because we wanted to actually look three dimensional.

Not like it's skewed.

So preserve three d.

So we're gonna save that.

And now if you check it out in your browser, you'll see that now we have a more reasonable size problem here is that all the layers are all messed up.

And that's because all these SPG graphics are the same width and same height and SPG graphics don't really perform the same way as a PNG bit map graphic, for example, which only takes up the size of space.

So, for example, this as a P and G would only take up this much space but it actually is taking up this much space, the entire container because of the height.

Ah, and it's just it's a thing that you have to work with with us three D files.

It's kind of unusual.

Maybe there's a way around it.

I'm not entirely experienced with playing with S P.

G's, but for this purposes of this tutorial, this is how we're gonna do it.

So now we gotta maneuver all these things using positions quite easy, but it takes a little bit of it.

Took me a little bit of playing around and maneuvering it, using ah, pixels and everything like that.

But it finally came to some final numbers.

So let's type those in right now.

So what we're gonna do, say, layers image of the class of mid because that we have each of the layers, the images with the class of back, mid top and tippy top, so we can do this with them.

I'm gonna say the width of the mid layer, which is the not the background layer, but the one just in front of it is 320 pixels.

And that's because we have a max with the 360.

So it's the background of 360.

I want this next one of the 3 20 and they're gonna shifted over.

This allows me to do some mock margins, so to speak.

So we're going to say 3 20 which will look something like this You could see.

Now it's smaller in the background right here.

Now I'm gonna shift it over 20 pixels, so that should give us an exact 20 and 20 on either side because its parent just 360 so 3 2040 is 360.

So, basic math.

Now we're gonna say layers image of the class of top, and we're going to give that one a width of 300 pixels.

So now I'm taking off 20 pixels in total.

From that Ah, from the top layer, Which is this one here, as you can see, this one with the logo and then the navigation.

So I want to shift that in about 30 pixels because it's gonna be 10 pixels on either side.

As you can see here, that's looking a little bit better.

But the top is off.

I don't like how the top looks.

So now I'm gonna say top if I said zero.

It would look like this.

That's because the top is at zero.

But I want to move it up just about five pixels.

So top negative five pixels.

And that looks like that.

That looks much better.

Now we have this tippy top layer, which are these this film reel and the bicycle layers image.

And then Tippi is what I called it with 280 pixels on taking off another 20 pixels.

Missy left 40 pixels and that'll look a little bit better.

But now I want to say top and I want to bring it up negative 150 pixels.

That should bring me up to where I want it.

So now our mock up is looking much more reasonable.

Now what we have to do is play with it.

So this is the fun part.

So we're going to create a style rule that says layers upon hover the images, so we're going to start off with trends form.

Now, What I'm gonna do is I'm gonna take hover off for now because I want to see it while I'm deboning versus having to hover over every single time to see my work so I'm just gonna say layers image for now.

Now, this is where all the fun comes in.

There's a lot of different values and functions.

Actually, you can add to the transform property.

So by function, I literally mean something like using rotate X.

This is a CSS function, a za value for this property.

So rotate X, this will rotate the image or all the images on the ex plain.

So I wanna rotate it 50 degrees.

Feel free to play around with this and all the ways that you want.

But you can see here now that something weird has happened.

Um, it's shifted on an angle like if you're looking at something, it shifted like this.

And so that's what happened here.

Now it doesn't look three D because there is one function that we have to add that I want to add it at the end so you can see the dramatic change.

So now I wanna rotate on the why Plane, 20 degrees.

Let's see what happens.

There we go.

So now we've the white plane.

Is this one.

So the explain is this one.

The white plane is this one.

And now we're gonna say, Rotate on the Z plane, negative 25 degrees and see what happens.

Okay, so now we've shifted it on this unusual angle as if it's coming if it's going back this way in towards us.

This way.

So in this, like, um Z plane, I suppose if you play around with it, you'll start to see how it's moving in digital space now.

Like I said, this doesn't look right.

It doesn't look very three dimensional versus this down here, you could see that looks very three dimensional like it's coming off your screen and towards you.

Well, that's because we need to add an additional function in here called Perspective on the Perspective.

Property or function in this case, creates or enables three D space on your screen and produces this illusion of a distance between the Z plane and myself, the person doing the screen.

So now what's gonna happen is if I say perspective and then let's go 1000 pixels.

Now, what's gonna happen here?

I'll tell.

Explain how this value the numeric value works, but let's see what it looks like first.

So now it looks three dimensional.

It actually has the proper the proper shape.

The back looks smaller than the front.

It's it looks like it's coming towards us a little bit.

What between just like 600.

No, because he's way more exaggerated that three dimensional effect.

So the smaller this value, the more exaggerated effect.

Because that's that means that you are closer to this element on the Seaplane.

So you're looking at something closer, as if I were looking at my phone like this.

The backside looks smaller than the front side.

It's got this dramatic effect.

Whereas if I was like this further away, it's much less exaggerated vs that.

So hopefully that makes sense.

Okay, so I'm gonna go back to gonna say 1200.

So it's, It's there, it's It's three D, but it's not crazy exaggerated.

Now, as you can see its way down here, it's not in the right space.

It looks kind of sloppy, especially if I hovered it.

It would fall down the page or look really weird.

So we're gonna remedy that with translate.

We're gonna translate on the X access 35 pixels.

This is simply like doing positioning, but in three D space, so translate 35 pixels.

That's going to move it to the left, translate on the Y axis, and we're going to say zero pixels.

We don't want it.

That's up and down and then translate on the Z axis, and that will bring us back up to the space where I want it.

So now we're looking a lot better.

So if I was a layers hover now layers hover.

Image saved that.

Let's see what that looks like.

A hover.

It shifts and transitions there.

It looks pretty good.