5 Flip Animation CSS examples

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:

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

<a class="card" href="#!"> 
    <div class="front" style="background-image: url(//source.unsplash.com/300x404)">
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
    </div>
    <div class="back">
      <div>
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
        <button class="button">Click Here</button>
      </div>
    </div>
</a>

Explanation

For the above HTML we have the three main important sections:

• 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

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

• degrees
• radians
• gradians
• turns

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:

<div class="card flip-vertical">
    <div class="front" 
    style="background-image: url(https://images.pexels.com/photos/38136/pexels-photo-38136.
        jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb)">
       <h1 class="text-shadow">Card One</hi>
    </div>
    <div class="back">
       <h2>Heading</h2>
       <p>Provident consectetur natus voluptatem quis tenetur sed 
       beatae eius sint.</p>
    </div>
</div>

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

.card {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1em;
    width: 400px;
    >.front,
    >.back {
      display: block;
      color: white;
      width: inherit;
      background-size: cover!important;
      background-position: center!important;
      height: 220px;
      padding: 1em 2em;
      background: #313131;
      border-radius: 10px;
      p {
        font-size: 0.9125rem;
        line-height: 160%;
        color: #999;
      }
    }
}

rotateX() CSS function

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:

• degrees
• radians
• gradians
• turns

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.

  .card {
    ...
    ...
    &.flip-vertical {
        >.back {
            transform: rotateX(-180deg);
        }
        &:hover {
            >.front {
                transform: rotateX(180deg);
            }
            >.back {
                transform: rotateX(0deg);
            }
        }
    }

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

<div class='cube'> 
  <div class='flip'>
    <p>Front</p>
  </div>
  <div class='flop'>
    <p>Bottom</p>
  </div>
</div>

Explanation of the animation

We have three CSS classes that will be key for this animation:

• 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.

.flip {
	-webkit-transform: translateZ(50px);
	transform: translateZ(50px);
    
}

.flop {
	-webkit-transform: rotateX(-90deg) translateZ(-50px);
	transform: rotateX(-90deg) translateZ(-50px);
}

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.

/* rotation */
.cube:hover {
	-webkit-transform: rotateX(89deg);
	transform: rotateX(89deg);
}

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

• translateZ CSS funtions changes the distance of the element on 3D space - higher values appear closer and lower values are further away.

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