hey everybody welcome back to css3 in 30
days today's day number 26 and we're
going to be building something really
exciting but first of all you might
notice that my microphone is in a really
weird
position
i realize with this road extendable boom
arm
that you can mount to your desk it's
really versatile it's quite nice
uh 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 adjusting this thing
not going to promise we're keeping it
this way folks
all right
we have got the day 26 3d layers and
what am i talking about when i say 3d
layers well
let me show you here to you right now
this might look like a just like a
normal
the normal mock-up
but the fact is that i created it in
photoshop using
svg
format which means it's a vector format
which means it's infinitely scalable and
super sharp regardless of your screen
size
and if you make it bigger or smaller so
i created this mock-up i included the
photoshop 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 on 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 uh
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 format on your
website so a mock-up a blueprint a
wireframe 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
let's 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 these three these six
circles
and this text down here this uh
mock-up text wireframe text just a bunch
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 straight 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 3d transformation in css3
so why don't we jump in and get started
over here in the code editor we have the
day 26 3d layers i have all of the
assets there index sandbox vinyl and the
image folder which includes
svg 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.psd there if
you want to open it up in photoshop 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 uncomment it it
creates a really uh there's the really
large
vector graphics that take up most of the
page you have to scroll down so for
visualization purposes showing you the
demo i didn't want you to see that so
now go ahead and uncomment that
and then you will have your
four images
scalable vector graphics now if you
check it on the browser it's going to
look really bad
massive files like this but we're going
to be using this and manipulating these
in css to make them work okay so now
that we've got those svg images svg
graphics in there what we're going to do
is head over to our sandbox and we're
going to get started with our coding
adventure for this 3d layer effect let's
start off by selecting layers
and then we're going to tell it position
relative
a minimum height
of now it's going to be a specific
number i'm going to say 6 640
pixels
and that's 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
going to scale that down to
about one-third 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 we're
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 going to have the proper ratio in
this parent layer and now next what
we're going to do is we're going to say
layers and then select the image tags
we're going to say position absolute
because we're going to be moving them
all around max width is going to be 100
so it's going to it's going to fill out
the content the parent the parent
container and now we're going to say
height is 100
it's going to fill out that parent
container
uh
height wise as well lengthwise
vertical wise whatever
transition we're gonna say all e's
sixteen hundred milliseconds
and that's important because we're going
to be doing a transition to give us that
animated effect now we're going to say
transform
style and we're going to say preserve 3d
because we're going to have the
transform we're going to do some uh
transforming and some
shifting and perspective you know 3d
animations and
maneuvering and this preserves that 3d
plane because we want it to actually
look three-dimensional not like it's
skewed
so preserve 3d
so we're going to 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 svg graphics are the same width
and same height and svg graphics don't
really perform the same way as a png
bitmap graphic for example which only
takes up the size of space so for
example this as a png would only take up
this much space but it actually
is taking up this much space the entire
container because of the height
uh and it's just it's a thing that you
have to work with with svg files it's
kind of unusual maybe there's a way
around it i'm not entirely experienced
with playing with svgs
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 uh pixels and
everything like that uh but i finally
came to some final numbers so let's type
those in right now
so what we're going to do
is 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 going to 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 width of 360. so it's the
background is 360. i want this next one
to be 320 and then i'm going to shift it
over this allows me to do some
mock margins so to speak
so we're going to say
320 which will look something like this
you can see now it's smaller in the
background right here now i'm going to
shift it over 20 pixels
so that should give us an exact 20 and
20 on either side because it's apparent
just 360. so 320 plus 40 is 360.
so basic math
now we're going to 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
from the top layer which is this one
here as you can see this one with the
logo and then the navigation so now i
want to shift that in
about
30 pixels because it's going to 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 going to say top if
i said 0
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 uh
this film reel and the bicycle
layers
image and then tippy is what i called it
with 280 pixels so i'm taking off
another 20 pixels
i'm gonna say left 40 pixels
and that'll look a little bit better
uh 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 transform
now what i'm going to do is i'm going to
take hover off for now because i want to
see it while i'm deving versus
having to hover over every single time
to see my work so i'm just going to 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
uh as a as a value for this
property
so rotate x this will rotate the image
or all the images on the x plane so i
want to rotate it 50 degrees feel free
to play around with this in 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's shifted
like this
and so that's what happened here now it
doesn't look 3d because
there is one function that we have to
add but i want to add it at the end so
you can see the dramatic change
so now i want to rotate
on the y plane
20 degrees let's see what happens there
we go so now we've
the y plane is this one so the x plane
is this one the y plane is this one
and now we're going to say rotate
on the z plane
negative 25 degrees let's 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 and towards
us this way so on 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 can 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
now the perspective
property or function
in this case
creates or enables 3d
space
on your screen and produces this
illusion of a distance between the z
plane and myself the person viewing the
screen
so
now what's going to happen
is if i say perspective and then
let's go 1000 pixels now what's going to
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 if i change this to like 600.
now you can see he's way more
um 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 z-plane so you're looking
at something closer as if i were looking
at my phone like this
the back side 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 versus
that so hopefully that makes sense
okay so i'm going to go back to i'm
going to say 1200 so it's it's there
it's it's 3d but it's not crazy
exaggerated now as you can see it's 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 would
look really weird so we're going to
remedy that with translate so we're
going to translate on the x
axis 35 pixels this is simply like doing
uh positioning but in 3d 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 were to say
layers
hover now layers hover image save that
let's see what that looks like i hover
it shifts
and transitions there it looks pretty
good and that's because we did the
transition
property up here if i were to take that
out
this would be a lot less nice
as you can see
it's that transition that shows us we're
going into three-dimensional space
so
now what i want to do is position these
in the proper i want them to to expand
out i want it to like give us that well
that effect down here
where it all kind of layers out that's
nice so we want to do that so we're
going to achieve that by individually
styling each image or each layer so i'm
going to say layers hover
image of the class of mid
and i'm going to go ahead and copy this
entire thing
paste it
and change a couple of the values now i
can i probably could take out the values
that i don't need like maybe if i just
took out all of these
and left translate z
translate zed
for us canadians
and i'm going to change that to 240
pixels let's see if just having one
value there works
it doesn't the reason why is because now
i'm saying that transform is not present
for all the other x y and z planes so i
have to leave it in
all of these values
translate z i'm going to change back to
240
check it out when i hover
you see that layer is now lifted off of
the
background copy this now the rest is
super easy paste that whole thing out
image
top
we're going to change the value of the
last one to 80. so that's going to be
280 pixels further on the z plane and
i'm going to refresh and hover
now we've got our second layer
like that
last but not least copy that
paste it out and now we're going to do
the tipi class
and that translate z
it's going to be as you can see in here
it's unusual the way that this floats in
space is because it's a different
proportions than these other elements so
we have to use different values to move
it in the right uh in the right place
so you might think 240 280 this one's
obviously going to be 320 but that would
really mess things up as you'll see here
it's just really too far and so there's
something about the size of this svg
that just means we have to change that
value so it's actually 260. i'm not
entirely sure why if i really looked
into it i'd figure it out
and maybe you have an idea but
this gives us the right effect
so now they're all about the same
distance from each other in that in
space in 3d space
and really that is it for our 3d layer
effect now here's a challenge for you
feel free to
maneuver this in whatever way you want
the thing is these this is a little bit
tricky and finicky if you're looking for
a responsive effect right now i've
hard-coded the width so that we don't
really have uh any issues but even in
the background here the background is a
100
you could see things are looking a
little bit different here
the other thing is when you hover
over this
layer these layers come out and then
hover again at any point in that
transition it it does like a weird as
you could see like it kind of
starts the animation from where you
clicked on it or where you hovered so it
really messes with it and it's really
unusual so you'd have to do this in the
right controlled space and uh really
play around with it to make sure you're
doing the right thing so you don't have
a really wonky looking animation
this is really for demo purposes to show
you what you can do with 3d space
rotates translates transforms and
everything like that i hope today's
lesson was valuable educational and fun
for you thanks for hanging out for day
26 tomorrow we're closing in on the last
few days here and i'll see you in day
number 27.
[Music]