Name: 3d Layer Effect: CSS Tutorial (Day 26 of CSS3 in 30 Days)
Uploaded: 2020-03-30T05:26:24.000Z
Duration: 18 min 10 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Hey, everybody, welcome back to CSS three and 30 days.

Adverbs of degree

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

Modal verbs - B1

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.

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.

So you might already think that's amazing.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

Subtitles ListPlay Video

3d Layer Effect: CSS Tutorial (Day 26 of CSS3 in 30 Days)

perspective

weird

essentially

exaggerate