3D Animation Flipping Image and Text Using Only Css

 We are going to see how to create 3d animation flipping image and text using only css. They are create animated flipping image and text. Image flipping into the text. they are used easy coding for html and css.this concept used gallery images and product images.below see the code

Code:

Html:

<div class="flip-box">

  <div class="flip-box-inner">

    <div class="flip-box-front">

      <img src="https://cdn.wallpapersafari.com/70/12/CqEd5H.jpg" alt="Paris" style="width:300px;height:200px">

    </div>

    <div class="flip-box-back">

      <h2>Hills</h2>

      <p>Hills is a nature. Beautiful place</p>

    </div>

  </div>

</div>

Css:

.flip-box {

  background-color: transparent;

  width: 300px;

  height: 200px;

  border: 1px solid #f1f1f1;

  perspective: 1000px; 

}

.flip-box-inner {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 0.8s;

  transform-style: preserve-3d;

}

.flip-box:hover .flip-box-inner {

  transform: rotateY(180deg);

}

.flip-box-front,

.flip-box-back {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.flip-box-front {

  background-color: #fff;

  color: black;

}

.flip-box-back {

  background-color: #000;

  color: white;

  transform: rotateY(180deg);

}