3D Flip Card Effect on Hover using only HTML & CSS

A flip card is a UI element that allows users to flip between two sides of a box to see different content. This HTML & CSS code snippet helps you to create a 3D flip card effect on hover. Each flip card has a different heading, description, and background image on each side.

How to Create 3D Flip Card Effect on Hover using only HTML & CSS

Create the HTML structure for flip card as follows:

<div class="box-container">
	<div class="box-item">
    <div class="flip-box">
      <div class="flip-box-front text-center" style="background-image: url('https://s25.postimg.cc/frbd9towf/cta-2.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Custom Domains</h3>
          <p>A short sentence describing this callout is.</p>
          <img src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" alt="" class="flip-box-img">
        </div>
      </div>
      <div class="flip-box-back text-center" style="background-image: url('https://s25.postimg.cc/frbd9towf/cta-2.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Custom Domains</h3>
          <p>A short sentence describing this callout is.</p>
          <button class="flip-box-button">Learn More</button>
        </div>
      </div>
    </div>
	</div>
	<div class="box-item">
    <div class="flip-box">
      <div class="flip-box-front text-center" style="background-image: url('https://s25.postimg.cc/hj4c4qnov/cta-3.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Never Sleeps</h3>
          <p>A short sentence describing this callout is.</p>
          <img src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" alt="" class="flip-box-img">
        </div>
      </div>
      <div class="flip-box-back text-center" style="background-image: url('https://s25.postimg.cc/hj4c4qnov/cta-3.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Never Sleeps</h3>
          <p>A short sentence describing this callout is.</p>
          <button class="flip-box-button">Learn More</button>
        </div>
      </div>
    </div>
	</div>
	<div class="box-item">
    <div class="flip-box">
      <div class="flip-box-front text-center filter-" style="background-image: url('https://s25.postimg.cc/l2q9ujy4f/cta-4.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Dedicated</h3>
          <p>A short sentence describing this callout is.</p>
          <img src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" alt="" class="flip-box-img">
        </div>
      </div>
      <div class="flip-box-back text-center" style="background-image: url('https://s25.postimg.cc/l2q9ujy4f/cta-4.png');">
        <div class="inner color-white">
          <h3 class="flip-box-header">Dedicated</h3>
          <p>A short sentence describing this callout is.</p>
          <button class="flip-box-button">Learn More</button>
        </div>
      </div>
    </div>
	</div>
</div>

Style the flip card using the following CSS styles:

html {
  font-family: sans-serif;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
.cd__main{
   background: linear-gradient(to right, #3f2b96, #a8c0ff) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.text-center {
  text-align: center;
}

.color-white {
  color: #fff;
}

.box-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 35px 15px;
  width: 100%;
}

@media screen and (min-width:1380px) {
  .box-container {
    flex-direction: row
  }
}

.box-item {
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 415px;
  margin-bottom: 35px;
  max-width: 100%;
}

.flip-box {
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  min-height: 475px;
  -ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
  transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
  -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-front {
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box .inner {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 60px;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
  
  transform: translateY(-50%) translateZ(60px) scale(.94);
  -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
  -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
  top: 50%;
}

.flip-box-header {
  font-size: 34px;
}

.flip-box p {
  font-size: 20px;
  line-height: 1.5em;
}

.flip-box-img {
  margin-top: 25px;
}

.flip-box-button {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
  padding: 15px 20px;
  text-transform: uppercase;
}

Code Explanation

.box-container: This rule defines the style for a container element with the class “box-container”. The container is displayed as a flex container with its items stacked vertically along the main axis, and it has a padding of 35px on the top and bottom and 15px on the left and right.

@media screen and (min-width:1380px): This is a media query that applies the styles inside the curly braces to the container element when the screen width is at least 1380 pixels.

.box-item: This rule defines the style for the child elements of the container with the class “box-item”. The child elements have a relative position, a width of 415px, and a maximum width of 100%. They also have a margin-bottom of 35px.

.flip-box: This rule defines the style for an element with the class “flip-box”. The element is displayed as a 3D flip card with a perspective of 1000px. It also has a preserve-3d transform style to ensure proper rendering of 3D transforms.

.flip-box-front and .flip-box-back: These rules define the style for the front and back faces of the flip box, respectively. Both faces have a background image with cover size and center position, a border radius of 8px, and a minimum height of 475px. They also have a transition effect when the flip card is hovered over.

.flip-box-front: This rule defines the initial style for the front face of the flip card. It is rotated 0 degrees on the Y-axis.

.flip-box:hover .flip-box-front: This rule defines the style for the front face of the flip card when it is being hovered over. It is rotated -180 degrees on the Y-axis to reveal the back face.

.flip-box-back: This rule defines the initial style for the back face of the flip card. It is positioned absolutely at the top left corner of the flip card, and it is rotated 180 degrees on the Y-axis to hide it behind the front face.

.flip-box:hover .flip-box-back: This rule defines the style for the back face of the flip card when it is being hovered over. It is rotated 0 degrees on the Y-axis to reveal the back face.

.flip-box .inner: This rule defines the style for the content inside the flip card. It has an absolute position, and it is centered vertically with a top value of 50%. It also has a perspective of inherit, and it is translated along the Z-axis to give it a 3D effect.

.flip-box-header and .flip-box p: These rules define the style for the header and paragraph elements inside the flip card, respectively. The header has a font size of 34px, and the paragraph has a font size of 20px and a line height of 1.5em.

.flip-box-img and .flip-box-button: These rules define the style for the image and button elements inside the flip card, respectively. The image has a margin-top of 25px, and the button has a transparent background color, a white border, and white text. It also has a font size of 20px, a font weight of bold, and a text-transform of uppercase.

That’s all! hopefully, you have successfully created 3D Flip card effect on hover using only HTML & CSS. If you have any questions or suggestions, feel free to comment below.