Back to Snippets

CSS 3D Card Flip on Hover

Implement an impressive 3D card flip animation on hover using only CSS transforms and perspective. This modern effect adds depth and interactivity to your card elements.

365

#css

#3d transform

#card flip

#animation

#hover effect

#perspective

/HTML *CSS ()JS Output Live Updates

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #e0e0e0;
  font-family: Arial, sans-serif;
  margin:0;
}
.flip-card-container {
  background-color: transparent;
  width: 300px; /* Width of the card */
  height: 200px; /* Height of the card */
  perspective: 1000px; /* Creates the 3D space */
}
.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 10px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card-container:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.flip-card-front {
  background-color: #007bff;
  color: white;
}
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card-back {
  background-color: #28a745;
  color: white;
  transform: rotateY(180deg);
  padding: 20px;
  box-sizing: border-box;
}

CSS 3D Card Flip on Hover

Share Code Snippet