Create a 3D vertical or horizontal flip card with css3

Today, we will learn about how to create a 3D vertical or horizontal flip card with css3.

The first, create a card HTML with front and back side like this:

Front

Back



then, add a little bit of css codes bellow:

.card {
  background-color: transparent;
  width: 300px;
  height: 250px;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 6px -4px 0px #444;
  border-radius: 15px;
  color: white;
}

.card-front {
  background-color: #229dd6;
}

.card-back {
  background-color: #ff8726;
  transform: rotateY(180deg);
}


- In this example, we use the transition property and transform property of Css3 to create 3D flip animation.
- The transform property is using the rotateY method with 180deg to vertical flip, for horizontal flip, we just change this method to rotateX

- Result

Vertical



Horizontal


3d flipcsscss3flip css animationhtml

© 2019 4codev

Created with love by Sil.