How to Design 3D Button Flip Animations using CSS

3D Button For rotation

Hello friends today we gonna learn about How to Design 3D Button Flip Animations using CSS. So read this article, How to Design 3D Button Flip Animations using CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Design 3D Button Flip Animations using CSS

Flip animations are popular CSS effects that show both the front and the back of an HTML element by rotating it from top to bottom or left to right (and vice versa). They are rad in 2 dimensions, but they are even cooler when run in 3D.

In this post, I’ll show you how to make simple 3D buttons, and add flip animations to them.

You can see the result on the demo below if you click on the buttons, they run the labeled flip animation.

1. Create the HTML for the 3D button

To make a 3D button (with Top → Bottom flip), first we stack three

‘s on top of each other, two for the front and back of the button, and a third to fill the depth in the center. We put the three button faces in the .flipBtn container that will function as the 3D button, and we place the 3D button in the .flipBtnWrapper wrapper.

2. Add basic styles with CSS

We set the width and height properties of the wrapper, the button, and the button faces and position them using the relative / absolute positioning technique.

.flipBtnWrapper {width: 200px; height: 200px; position: relative;}

.flipBtn, .flipBtn_face {width: 100%; height: 100%; position: absolute;}

Style the 3 button faces

We add background images on the front and back button faces and set a cool linear gradient behind the images for both. The trick here is that in CSS you can set multiple images as background image for the same element, and you can also declare gradients as background images.

The middle face, .flipBtn_mid, will have a height of 20 px, and the same space of 20 px will be created between the front and back. We achieve the latter by using the translateZ () CSS function die moves an element along the z axisWe push back the back 10 px and bring the front forward 10 px.

.flipBtn_front {background-image: url (“image / css-3d-flip-button-animation-play.png ”), linear gradient (# FF6366 50%, # FEA56E); rear visibility: hidden; transform: translateZ (10px);}

.flipBtn_back {background-image: url (“image / css-3d-flip-button-animation-pause.png ”), linear gradient (# FF6366 50%, # FEA56E); background color: blue; transform: translateZ (-10px);}

.flipBtn_mid {height: 20px; background color: # d5485a; transform: rotateX (90deg); top: -10px;}

To cover the space between the front and back with the middle, we lay the center face flat over the x plane of 3D space using the transformation: rotateX (90deg); arrange that makes it plumb both forwards and backwards button faces on the y plane.

Because the center plane is laid flat over the x plane, the top point on the y axis will go 10 px (half the height) lower than the original. So to withdraw it up and align the top with the other two button faces, I also added the line top: -10px.

I’ve used the CSS backface-visible property for the front side, so if we use the button, the back of the front will not be visible.

So far you can only see the front on the screen, as the x-plane is hidden from view, and on the y-plane (screen) the front was the last face deposited. Through the button you will also be able to see the other faces.

The button

4. Rotate it button

The transform-style CSS property determines whether the child elements of an HTML element are displayed flat or placed in 3D space. In the code snippet below, the transform style is: preserve-3d; rule gives 3-D volume to our button, while the transform: rotatexX () property rotates it around the x axis.

.flipBtn {transform-style: preserve-3d; transform: rotateX (-120deg);}

Note that I have only used -120deg for demonstration purposes as it is easier this way to illustrate how the button rotation works.

Rotated 3D ButtonButton Rotated -120 °

However, in the next step, we’ll change it to -180deg every button turn around completely.

Animating it button

At this point our 3D button is still not animated. We can do this by using the transition property. We use the transform property for the first value, as this is the property we want to apply the transition effect to. The second value is the duration, 2 sec.

Let’s do the button only run on hover, so instead of the .flipBtn selector, let’s use .flipBtnWrapper: hover .flipBtn. As mentioned before, also change the value of rotateX () to -180deg every button turn around.

.flipBtn {transition: transform 2s; transform-style: preserve-3d;}

.flipBtnWrapper: hover .flipBtn {transform: rotateX (-180deg);}

Note that in the Github repository I added a check box to each button to activate the animation on: checked instead of: hover, this way it behaves more like a real buttonI’ve also added four different ones buttons with four flip directions (Top → Bottom, Bottom → Top, Right → Left and Left → Right), so you can easily use whatever you want.

  • View demo
  • Download source
back to menu ↑

How to Design 3D Button Flip Animations using CSS: benefits

  • The How to Design 3D Button Flip Animations using CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Design 3D Button Flip Animations using CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How to Design 3D Button Flip Animations using CSS

In this guide, we told you about the How to Design 3D Button Flip Animations using CSS; please read all steps so that you understand How to Design 3D Button Flip Animations using CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design 3D Button Flip Animations using CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design 3D Button Flip Animations using CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Design 3D Button Flip Animations using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Design 3D Button Flip Animations using CSS, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Design 3D Button Flip Animations using CSS”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Design 3D Button Flip Animations using CSS, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart