Up next in 10
3D Flip Button Tutorial
10K views
Feb 7, 2024
The "3D Flip Button Tutorial" is an instructional video that teaches viewers how to create a three-dimensional (3D) flip button effect using HTML, CSS, and possibly JavaScript. Throughout the tutorial, viewers are guided step-by-step through the process of designing and implementing a button that flips or rotates when interacted with, providing a visually engaging user experience. The video covers essential concepts such as CSS transitions, transforms, and pseudo-elements to achieve the desired 3D effect. Through clear demonstrations and explanations, viewers learn how to customize the appearance and behavior of the flip button to suit their design preferences. Whether you're a beginner exploring front-end development techniques or an experienced developer seeking to add flair to your user interface elements, this tutorial offers valuable insights into creating dynamic and interactive 3D effects.
View Video Transcript
0:00
Hello everybody, welcome to my first CSS challenge video. In this video I'm going
0:05
to be going over my thought process as I code this button over here on the right which is a rotating 3d button. So as you can see when you hover over it it'll
0:13
show the top face of the button and when you hover off of it it'll go back to showing the front face. It'll be smooth no matter how quickly you go on or off
0:21
of the button and it'll always work. So if you guys do enjoy this video please let
0:26
me know down below in the comments by either leaving a comment or liking this video because if this video does get enough support I'd love to make this
0:33
into a full-time series where you guys leave suggestions for what challenges I
0:36
should complete and then I show you guys me completing these challenges and how I
0:40
think about it how I go through it. So let's get started by creating this over
0:44
here. I have my project set up on the left here just going to open it
0:48
up with live server. There we go and I have two style sheets linked here in my
0:54
main index page. One is just a background style CSS page which is just for setting
1:00
this background color and positioning my button in the center of the screen. None of this is actually important for the button itself so I have it separated and
1:07
then I have another style sheet here my styles.css and this is going to be
1:12
where we put all the code for the actual button. So let's get started with this
1:15
actual button. The first thing that we want to do is create the HTML for our
1:19
button. So many of you may think that what we should do is create a button
1:23
here and then inside of it we would put our two different faces for hover me and
1:27
surprise but button elements do not allow you to put block sized elements
1:33
inside of them you're only allowed to use inline elements and for our project
1:37
we need to use block elements in order to get these elements positioned correctly. So instead of using a button we're going to use a div here instead
1:44
since divs allow us to use inline and block elements inside of them. The next
1:49
thing we need to do is we need to include our two different texts that we have so we'll include these inside of divs as well. Our first text which is on
1:56
the front it's going to be hover me and then our second text which is going to
2:00
be another div inside of our button div is going to be the text surprise and
2:07
there we go now we see that we have our front face and our top face of our
2:12
button over here and then all we need to do is add some classes to these divs that we know how to distinguish them. We'll give this class of button since
2:19
it's going to be the wrapper around our button and then our front face here
2:24
this is going to have the class of side since it's the side of our button and
2:28
then it'll have another class of default side since this will be the default side
2:33
that we want to show when we load the page. Then lastly our surprise side is
2:38
going to have a class of side and then another class of hover side since this
2:42
is the side we want to show when we hover and with these five classes that
2:46
we have set up on our different divs here we're going to be able to style all the styles that we need to in a way that makes sense because they're named
2:52
by classes so that way when we go into our styles sheet we can share some of
2:56
these classes such as side between these two sides and then do specific things on
3:00
the default and hover side. So now let's go into our styles.css and start
3:04
coding this up. The very first thing that I like to do with almost any project I
3:08
do is use the everything selector and set the box sizing to be border box
3:13
because this will make sizing our elements much easier since border box
3:17
makes the width include padding and the border inside of the width of the object
3:22
instead of adding it onto the width. Then what I like to do when tackling these
3:26
challenges is to first design the layout and the sizing and coloring of the
3:31
object and then tackle the specifics of whatever the challenge is. So in this
3:36
case the specifics would be the 3d rotation of the box so all rotations and
3:40
3d related elements I'll do after designing the layout and sizing of the
3:45
elements. So first what I want to do is I want to design the size of the button
3:49
itself. To do that we'll take our button class and start applying styles to this
3:54
We know that we want this to be a block level element which is perfect because
3:57
we used a div so we don't even need to specify display block in here since
4:01
divs are already display block. What we do want to do though is give it a height
4:05
and a width since we want our top and bottom face to be both the exact same
4:09
size in our button. So we'll set a height here of which just do 150 pixels
4:14
and then we'll do a width and we'll make the width 450 pixels. There we go if we
4:20
save that we see that our button has grown a little bit and that's really all
4:24
we need to do for the button for now. So now let's move on to the different sides of our button. The first thing we need to do is use the selector for our side
4:31
class here in order to select both of the different sides of our button to
4:35
style and what we want to do is we want to make these sides fill the entire
4:39
space that our button has so we'll use a width of 100% here so that our width
4:45
will be the entirety of our button and a height of 100% so our height will also
4:50
fill all the space available. Well you'll notice that these actually space out
4:55
from each other and we want them to overlap so that we can easily position them later so we'll use position absolute here in order to position them
5:04
absolutely from each other so that way they'll be absolutely positioned in
5:09
inside of the nearest relatively positioned object and since we want them relative to our button we must use position relative on our button so that
5:17
they are inside of our button. Next we want to position them centered in our
5:21
button and an easy way to do that is to use flexbox so we'll just do display
5:26
flex here use justify content center and align items center to position it in the
5:32
center horizontally and vertically and as you can see it's now being in the
5:36
positioned in the center of our button right here and the next thing we need to
5:39
do is increase our font size a little bit since it's very small so we'll
5:43
change our font size here to be 4em and we'll change our font weight here to be
5:50
bold. Now if we say that you see that our text is much larger and overlapped as we
5:54
want it to be. The next thing to do is style the specific sides of our buttons
5:58
so we'll use our default side selector here in order to style the default side
6:04
of our button. There we go and we just want to make the background color to be
6:09
white. There we go we need a border around it so this border we're going to
6:18
make it 10 pixels wide it's going to be solid colored border and we're gonna
6:22
make it this blue color which is denoted by this hex color value and if we save
6:28
that you'll see that our front value of our side looks really good right now. The
6:32
last thing we need to do is make the color of the text the same as the border
6:35
so we put that in there and save that and that's perfect. Now in order to style
6:40
our top side face let's just go into our index page here and comment out our
6:45
front view so that we can easily see our top view while we're styling it and
6:50
we'll use hover side here to select that and now we want to make the color on
6:55
this it's going to be white since our background is going to be that blue color so we make the color white here and then we make the background color
7:04
whoops background color there we go we're gonna make that that bluish color
7:10
here there we go that's the top face of our button already done and we didn't
7:15
need to do any border on this because in our example there was no border on the top face so now we can go back in here and uncomment out our hover me button
7:23
and if we save that we'll now have the surprise button on type and the hover me
7:28
button right behind it. Now we need to do is work on the actual rotation and
7:32
3d elements of this design. The first thing we need to do is add a perspective
7:37
to our CSS this is because when working in three dimensions you need to tell the
7:42
browser what perspective the user is from so if we go up to the top here
7:46
we'll select our body element and we use the perspective selector perspective
7:53
and we'll set it to 800 pixels essentially what this selector is doing
7:57
is saying we want to assume that the user is 800 pixels away from this object
8:03
essentially so it'll give it depth to our object as if the user is 800 pixels
8:08
away if there is no perspective if this was zero for example we're assuming that
8:13
there is no distance between the viewer and the object so there is no depth so
8:17
when we rotate the button it wouldn't show the corners and the sides this is
8:21
why we need to use an 800 pixel perspective which will put our viewer
8:25
far enough away that we can see the edges and corners of our button as it rotates. The next thing we need to do is take this top face here and we need to
8:33
rotate it so that it's going to be on the top of our button instead of in the front. To do that we just go down to that side that is specifically for this and
8:41
we use the transform selector which allows us to translate rotate and move
8:45
our objects in ways other than just dialing them with the widths and heights so in here we're going to use rotate and we want to rotate on the x-axis so
8:55
we do rotate X and we'll give it 90 degrees as our value to rotate since we
9:00
want it to rotate 90 degrees above our other button and if we save that you'll
9:07
see that now it has completely disappeared that's because it has rotated up so that it is right along the top of this and it is invisible almost
9:15
because it is so thin. If we change this for example to 45 degrees and saved it
9:20
you'll see that it is partially rotated up if we go to 65 it's even more rotated
9:26
and once we go all the way to 90 degrees it's completely horizontal and since it
9:31
has no depth it just completely disappears which is exactly what we want
9:34
for this project. The next thing that we need to do is we need to go to our
9:38
button class in order to style our rotation for when we hover over the
9:42
button because right now hovering over it does absolutely nothing so let's go
9:46
to our button we'll add a selector for hover and when we hover over it we want
9:52
the transform to be rotated on the x-axis by negative 90 degrees which will
9:59
make it so that our top face will become apparent and the bottom face will go
10:04
over the front face will go away so if we save that and hover right now it's
10:09
just glitching out this is because we're not doing a 3d transformation in
10:14
order to do that we need to change our transform style of our button transform
10:21
style here to be preserve 3d and now if we save that and hover you see that our
10:26
top face becomes viewed when we hover and when we unhover our front face is
10:31
viewed. This is perfect but you see that there's no transition period between the
10:35
two it just immediately switches between them. In order to change this we're going
10:39
to add a transition property to our button which will allow us to add timing
10:44
between our transitions so the first property here is what attribute you want
10:49
to transform for us we want the transform attribute to have a transition
10:54
period to it. The second property is how long we want it to take in our case we'll
10:58
use 300 milliseconds since it's slow enough that you can see it but fast
11:02
enough that it feels quick to the user and then the last attribute is what type
11:08
of curve you want the speed of the animation to take so we'll use ease in
11:12
out which means that it'll go slow at the beginning faster in the middle and
11:16
then slow at the end again so if we save that and hover over our button you'll
11:21
see that it rotates now and you have a little bit of transition period between when the front face is shown and the top face is shown and same when you unrotate
11:29
it but you'll notice that our buttons are currently inside of each other when
11:32
they rotate and we want the top face to come from the top instead of from the
11:36
center in order to change this we need to translate our button away from each
11:41
other so if we go down to our default side here we'll use our transform
11:45
property again and we'll translate and we're going to translate on the z-axis
11:50
since the z-axis is what comes out of the computer for example positive z-axis
11:55
would bring an element closer to you and a negative z-axis would bring it further
11:59
away from you in 3d so we're going to translate by half of the height of our
12:04
button since right now it's in the dead center and we want to move it half of
12:08
the height towards us so we'll just use 75 pixels here to bring the button 75
12:14
pixels closer to us now if we save that you'll see the button has gotten a
12:18
little closer a little blurrier and you see that it is right on the bottom of our surprise element which is exactly what we want but we also need to
12:25
translate this surprise element here so we'll just go down here in our transform
12:29
property we can just add another translate here translate on the z-axis
12:33
and we'll again do 75 pixels save that and now you'll see that our top face is
12:39
actually coming from the top of our button this is exactly what we want but
12:44
you may be a bit confused why we translated on the z-axis for both of them because if we translate on the Z for the hover side shouldn't that bring
12:50
it closer to us instead of bringing it higher up and this is because when we
12:54
rotated the object on the x-axis it actually rotated the entire axis of the
13:00
element so instead of the z-axis pointing towards the screen it's actually pointing up and down if this is a bit confusing it'll become more
13:07
apparent because we were going to do a similar transformation on the button
13:11
element in a little bit here one thing I want you guys to notice though is if we
13:15
remove the background color for hover side for now and hover you'll see that
13:19
we can see our front face from behind which we don't want to happen what we
13:24
want to use is a property called back face visibility so we set this here back
13:30
face visibility and we want to set this to hidden so that the back faces of our
13:35
elements will be hidden so now if we hover over our button you see that as
13:39
soon as we are able to view the back of the button it completely disappears which is exactly what we want now we can add that background color back in save
13:46
it and our button will work as before one thing you may notice though is when
13:51
we translated the button closer to us it got a little bit blurry the text kind of
13:55
got blurred and we want to remove that so what we're going to do is translate
13:59
the actual button element itself back 75 pixels again to essentially remove the
14:05
blur from bringing it closer to us so in our button here let's do transform and
14:11
we're going to translate on the z-axis and we're going to go negative 75 pixels
14:15
to bring that button 75 pixels farther away from us if we save that you now see
14:21
that our text is crisp and our button rotates again but you'll notice that it
14:25
doesn't actually rotate the same as before it now brings the button closer
14:30
to us when it rotates as you can see the top face is larger than the front face
14:34
and this is because our transform right here where we rotate on the x-axis this
14:40
translates e now is translating not in the back and forth direction but in the
14:45
up-and-down direction which is translating our button up and down as opposed to towards us and away from us in order to fix this we need to add
14:52
another translate here where we're going to translate on the y-axis and we want
14:57
to translate 75 pixels on the y-axis since when the button is rotated the y-axis
15:02
is now facing towards us and translating 75 pixels on the y-axis will push
15:07
the button 75 pixels away from us so if we save that here and we rotate we now
15:12
see that our front or top face does not get larger when we rotate and now this
15:17
is the completely finished button here it really didn't take very much code to
15:21
create this and about 90% of the code here is really just to style the actual
15:26
text color background colors and borders of the button and only a few of these
15:31
transform lines are the actual rotation code that we needed to make this button
15:35
rotate when we hover over it so hopefully you guys were able to follow
15:40
along my thought process here where first I designed the size of our
15:43
elements with the button here the size of our side as well as the position of
15:47
our text and then I went about and styled the actual coloring of our
15:50
element with background colors borders and colors so that way I knew what I was
15:54
working with with color and design before I ended up adding the actual
15:58
implementation of transforming and rotating these buttons so that it worked with the rotate on hover so thank you guys very much for watching this video
16:06
if you guys enjoyed it please leave a comment down below and a like and let me
16:11
know what CSS challenges you want me to complete in the future because I would love to continue to do these if you guys enjoy it thank you very much
#Arts & Entertainment
#Development Tools
#Programming
#Visual Art & Design