CSS Card Hover Flip 3D Animation

Contents

  1. Horizontal Flip Animation
  2. Vertical Flip Animation
  3. Diagonal Flip Animation
  4. 3D Back Side Flip Animation
  5. Continuous Flip Animation
  6. Image Flip Animation

This card flip animation is created using CSS 3D transforms and transitions. Hover over the card to see it flip, revealing a different content on the back side.

This page offers multiple variations such as horizontal, vertical, diagonal, and continuous flips, complete with live previews and copy-paste-ready code snippets.

Horizontal Flip Card Animation

Hover over the card to experience a sleek 3D horizontal flip animation along the Y-axis.

Preview:

Rotation:
Horizontal Flip
Back Side

Code:

HTML
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front"> Front Side </div>
        <div class="flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.flip-card {
    background-color: transparent;
    width: 200px;
    height: 250px;
    perspective: 1000px;
    /* Enables the 3D effect */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}

.flip-card-front {
    background-color: #3498db;
}

.flip-card-back {
    background-color: #03a046;
    transform: rotateY(180deg);
}
Run code Try it yourself

Vertical Flip Card Animation

Hover over the card to trigger a smooth 3D vertical flip animation along the X-axis.

Preview:

Rotation:
Vertical Flip
Back Side

Code:

HTML
<div class="vertical-flip-card">
    <div class="vertical-flip-card-inner">
        <div class="vertical-flip-card-front"> Front Side </div>
        <div class="vertical-flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.vertical-flip-card {
    background-color: transparent;
    width: 200px;
    height: 250px;
    perspective: 1000px;
    /* Enables the 3D effect */
}

.vertical-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.vertical-flip-card:hover .vertical-flip-card-inner {
    transform: rotateX(180deg);
}

.vertical-flip-card-front,
.vertical-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}

.vertical-flip-card-front {
    background-color: #3498db;
}

.vertical-flip-card-back {
    background-color: #03a046;
    transform: rotateX(180deg);
}
Run code Try it yourself

Diagonal Flip Card Animation

Hover over the card to activate a smooth 3D diagonal flip animation for a dynamic effect.

Preview:

Rotation:
Front Side
Back Side

Code:

HTML
<div class="diagonal-flip-card">
    <div class="diagonal-flip-card-inner">
        <div class="diagonal-flip-card-front"> Front Side </div>
        <div class="diagonal-flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.diagonal-flip-card {
    background-color: transparent;
    width: 200px;
    height: 250px;
    perspective: 1000px;
    /* Enables the 3D effect */
}

.diagonal-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.diagonal-flip-card:hover .diagonal-flip-card-inner {
    transform: rotate3d(1, 1, 0, 180deg);
}

.diagonal-flip-card-front,
.diagonal-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}

.diagonal-flip-card-front {
    background-color: #3498db;
}

.diagonal-flip-card-back {
    background-color: #03a046;
    transform: rotate3d(1, 1, 0, 180deg);
}
Run code Try it yourself

3D Back-Side Flip Animation

Hover over the card to reveal a 3D back-side flip rotation animation.

Preview:

Rotation:
Front Side
Back Side

Code:

HTML
<div class="rotate-flip-card">
    <div class="rotate-flip-card-inner">
        <div class="rotate-flip-card-front"> Front Side </div>
        <div class="rotate-flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.rotate-flip-card {
    background-color: transparent;
    width: 200px;
    height: 250px;
    perspective: 1000px;
    /* Enables the 3D effect */
}

.rotate-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.rotate-flip-card:hover .rotate-flip-card-inner {
    transform: rotate3d(1, 1, 1, 180deg);
}

.rotate-flip-card-front,
.rotate-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}

.rotate-flip-card-front {
    background-color: #3498db;
}

.rotate-flip-card-back {
    background-color: #03a046;
    transform: rotate3d(1, 1, 1, 180deg);
}
Run code Try it yourself

Continuous Flip Card Animation

Watch the card rotate endlessly with a smooth, continuous flip card animation. You can set direction Horizontal or Vertical and rotation direction

Preview:

Flip Direction:
Rotation:
Front Side
Back Side

Code:

HTML
<div class="continuous-flip-card">
    <div class="continuous-flip-card-inner">
        <div class="continuous-flip-card-front"> Front Side </div>
        <div class="continuous-flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.continuous-flip-card {
    background-color: transparent;
    width: 200px;
    height: 250px;
    perspective: 1000px;
    /* Enables the 3D effect */
}

.continuous-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.continuous-flip-card-front,
.continuous-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}

.continuous-flip-card-front {
    background-color: #3498db;
}

.continuous-flip-card-back {
    background-color: #03a046;
    transform: rotateY(180deg);
}

.continuous-flip-card-inner {
    animation: flip 3s linear infinite;
}

@keyframes flip {
    0% { transform: rotateY(0deg) }
    100% { transform: rotateY(360deg) }
}
Run code Try it yourself

Interactive Image Flip Animation

Hover over the image to trigger a sleek flip animation with a dynamic 3D effect.

Preview:

Flip Direction:
Rotation:
demo
demo

Code:

HTML
<div class="flip-image">
    <div class="flip-image-inner">
        <div class="flip-image-front"> <img src="/images/demo/13.jpg"> </div>
        <div class="flip-image-back"> <img src="/images/demo/8.jpg"> </div>
    </div>
</div>
CSS
.flip-image {
    background-color: transparent;
    width: 300px;
    height: 190px;
    perspective: 1000px;
}

.flip-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-image:hover .flip-image-inner {
    transform: rotateY(180deg);
}

.flip-image-front,
.flip-image-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip-image-inner img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.flip-image-back {
    transform: rotateY(180deg);
}
Run code Try it yourself