Flip effects in css

/* The flip card container — set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don’t want the 3D effect */
.flip-card background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don’t want the 3D effect */
>

/* This container is needed to position the front and back side */
.flip-card-inner position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
>

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner transform: rotateY(180deg);
>

/* Position the front and back side */
.flip-card-front, .flip-card-back position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
>

/* Style the front side (fallback if image is missing) */
.flip-card-front background-color: #bbb;
color: black;
>

/* Style the back side */
.flip-card-back background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
>

Источник

How TO — 3D Flip Box

Move your mouse over the boxes below to see the effect:

Horizontal Flip:

Front Side

Back Side

Vertical Flip:

Front Side

Back Side

How To Create a Flip Box

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The flip box container — set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don’t want the 3D effect */
.flip-box background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don’t want the 3D effect */
>

/* This container is needed to position the front and back side */
.flip-box-inner position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
>

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner transform: rotateY(180deg);
>

/* Position the front and back side */
.flip-box-front, .flip-box-back position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
>

/* Style the front side */
.flip-box-front background-color: #bbb;
color: black;
>

/* Style the back side */
.flip-box-back background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
>

Vertical Flip

To do a vertical flip instead of a horizontal, use the rotateX method instead of rotateY :

Example

.flip-box:hover .flip-box-inner <
transform: rotateX(180deg);
>

.flip-box-back transform: rotateX(180deg);
>

Note: These examples do not work properly on tablets and/or mobile phones.

Tip: Go to our CSS 2D Transforms Tutorial, to learn more about 2D transformations, such as the rotate() method.

Tip: Go to our CSS 3D Transforms Tutorial, to learn more about 3D transformations.

Источник

5 Flip Animation CSS examples

We go through 5 examples of using flip animations with CSS. Flip animations is great for use on blogs where you want to have a preview card of the blog article. You can also use this for a photo gallery to show some interesting interactions for the user

Feb 14, 2022 | Read time 8 minutes

🔔 Table of contents

In this article we will go through 5 examples of using flip animations with CSS. Flip animations is great for use on blogs where you want to have a preview card of the blog article. You can also use this for a photo gallery to show some interesting interactions for the user.

To create a flip animation, we have to use the @keyframe CSS property and transform using the rotateX() and rotateY() functions.

Example 1 — horizontal flip card

For our first example, we will create a horizontal flip card effect. This design commonly appears on blogs or gallery websites. The result looks as follows:

See the Pen Card Flip by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

We start with our HTML to create the cards as follows:

• the card class — this is the main class to style each of our cards. We can style it to contain borders, rounded edges, fonts, etc.
• the front class — this is the front of the card styling and will contain the Unsplash background image
• the back class — this is the back of the card styling and will contain the button. This will not be displayed by default.

Our approach to create this flip animation with CSS is when the user hovers over the front , we will rotate it 180 degrees using the rotateY CSS function. The back of the card will be rotated negative 180 degrees using the rotateY function.

rotateY() CSS function

In our case we use 180 degrees (180deg)

Example 2 — flip card vertical

Similar to the above example, we can create a vertical flip card effect. From a user experience perspective, this suits when the page requires a lot of vertical scrolling.

Our HTML will have the same structure as the above example:

And the styling for each of the cards will have the following CSS:

As with example 1, we use the vertical rotation — rotateX() CSS function.

The rotateX() CSS function is key for this type of animation. It is a function that transforms the element around the X axis without deforming it. The function accepts a angle and can be data types of:

In our case we use 180 degrees (180deg). As we can see below, when the user :hover over the card element, we rotate it vertically by 180 degrees.

Example 3 — cube flip animation vertical

We can use @keyframe CSS animations to create a vertical cube flip animations as below. This type of animation can be useful for displaying buttons or cards. It is recommended to use sparingly to since over use of animations can disorient or irritate the user.

When the user hovers over the cube, it will rotate vertically to its top side.

To create this effect, we use the following HTML

• cube — this is the main container class. The animation will kick in once the user :hovers over this element.
• front — this is the front of the cube. This will appear on the Z axis
• back — this is the back of the cube. We will transform it 90 degrees on the X axis and 50 pixels on the Z axis

So the CSS will be as follows.

The important takeaway from this animation is that we include the Z axis using translateZ .

The translateZ() CSS function just repositions the element on the Z axis. This means that we can position it closer or further away on the 3D space.

So in our case, our cube will have the .flip side to be closer to the user and .flop side to be further from the user and rotated 90 degrees vertically. Essentially we are hiding the .flop side until the user hovers over the cube.

Example 4 — cube flip animation horizontal

Similar to example 3, we can create a cube flip animation that has horizontal perspective as compared to the vertical one as above.

When the user hovers over the cube, it will rotate horizontally to one of its faces on the side.

As with example 3, instead of using rotateX() CSS function, we use the rotateY() function.

Example 5 — flip animation loading

In the final example, we can use CSS animations to create the following loading animation with 4 squares that stagger the flips.

Final thoughts

We went through five examples of how to do flip animations with CSS. Flip animations can be useful for blog preview cards or gallery web designs.

They give the user interesting interactions and help them stay on your website.

Flip animations will require you to use @keyframe CSS animations and a combination of rotateX , rotateY and translateZ CSS functions.

rotateX CSS functions rotate the element on the X axis — ie vertically

rotateY CSS functions rotate the element on the Y axis — horizontal

Using a combination of the three properties we can come up with interesting flip interactions.

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

About

Hi, I’m Kentaro — a sofware engineer sharing my programming tips!

Источник

24 CSS Flip Cards

Collection of hand-picked free HTML and CSS flip card code examples from codepen and other resources. Update of July 2019 collection. 5 new examples.

Related Articles

1. CSS Cards
2. CSS Blog Cards
3. CSS Card Hover Effects
4. CSS Card Layouts
5. CSS Material Design Cards
6. CSS Movie Cards
7. CSS Product Cards
8. CSS Credit Cards
9. CSS Profile Cards
10. CSS Recipe Cards
11. CSS Business Cards

Author

Links

Made with

About a code

Pricing Pure CSS Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Interactive and Responsive Card with Space Theme

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Card Flip Reflection

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flipping Card Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

UI — Flip Card

Flip card (using :focus-within for a11y).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Fallout 76 CSS Slugger Perk Card

A CSS only (with a bit of native JS interaction) recreation of a Fallout 76 perk card. I saw the perk cards while checking out some videos. At first I thought the notch/bump in the corner would be interesting to recreate in CSS, however as I was building it I realised that there were lots of bits that would be interesting to create in CSS. In particular the conic gradient (used for the background on the front of the card). It’s not yet supported outside of Chrome (using a fall back) but it’s a neat piece of CSS. Other bits used: various CSS shapes using overlaps (the stars), Google Fonts, animations, gradients with stops, and all rems for easy resizing at different device sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник