Transforming 3D Button Effect using CSS3
In this tutorial, we are looking at the most amazing animation of CSS which is transforming 3d button effect using CSS3. In this article, you are going to learn how to make a simple and very effective 3d transforming button using CSS3. We are creating this effect when the user hovers over the button.
Well, there is thousands of animation are there on hover effect but still, this one is most amazing. The reason is its 3d capability. We love to watch movies in 3d, love to watch VR( virtual reality ) in 3d. The same with this animation also.
In this tutorial, we are looking at the most amazing aspect of CSS3 to create this transforming 3d effect and also see how you can use it with a different type of HTML element. Well, in the above image you will see this button with the text “GET A QUOTE”. When you make this tutorial and hover the mouse this will change to “LET’S START” and transform into the 3d model.
Before taking your too much time to let’s get started and create transforming 3d button effect using CSS3.
So you need to first create two files. first one is index.html and second is style.css. In index file, we put HTML elements and in style file, we style these HTML elements. In index file, we insert some tags that create button and the top 3d panel of that button. let’s take a look at the code. You just need to import this code into HTML file and then link style.css file in the head section.
I will just show you how your index.html file looks like.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Style.css">
<div class="cube-face front-face">GET A QUOTE</div>
<div class="cube-face top-face">LET'S START</div>
- In the above code, you can find some division tag with class names scene, cube, cube-face, front-face, and the top face. Don’t be afraid, I will explain you everything in details. Well, scene class use to add width and perspective for the element. Perspective is just like a camera that shows you a distance of the object from your eyes. So when the element decreases the size of it, it looks like he is going far away from you.
- Now let’s move to another class which is cube. we are using this class just for making a button with some height and width. we also take transform style property. This property will make your element 3d.
- The cube-face class is used to specify height, width, and position for the button. This is the actual button shown in the image. This button has two sides. Front and top. You are free to make more than that. But in this article, we are creating only two sides of that button.
- Front-face and top-face are the two sides of the button. Front face represents the front side and top face represents the top side.
Create a style file to add 3d functionality. After you create this file make sure you link this file with an index.html file with the link tag. If you imported the above Index.html file code in your HTML file then don’t worry we already done that for you But just make sure you named your file style.css.
Import this code in Style.css file.
background: #ffe259; /* fallback for old browsers */
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 16.3em auto;
transition: transform 0.5s;
transform: rotateY(0deg) translateZ(24px);
transform: rotateX(90deg) translateZ(35px);
Keep in mind if you wanted to create your own class names then you can do that but make sure you change that name in other reflected files also. In the above code, we just add transform rotateX property to rotate the button vertically when the user hovers it.
A CSS3 provides us with a great support of using transform property. This property allows us to transform element, rotate an element, Skew an element and much more. Moreover, You can also use @keyframes to make your animation alive. @keyframes are the key to creating animation over the years. There is more article on this website on @keyframes we recommend you to read these ones also.
Run your project and hover the button. You will see how you can create an amazing effect using cascading stylesheet. Inspect the style.css file and make some changes. Create your own button and learn from this example.
That is all for this article, we will take you to the next amazing tutorials. Till then keep reading.