Jibu kama: Kikarata kwenye kikarata

Jibu kama kuundwa kikarata

Kinyume cha - Ongeza HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Architect & Engineer</p>
      <p>Wanaweza kweli mwenye</p>
    </div>
  </div>
</div>

Second step - Add CSS:

/* Container for the flip card - set the width and height you want. We added the border attribute to demonstrate that the flip itself extends beyond the container when hovering (if you do not want 3D effect, please delete the perspective) */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* If you do not want 3D effect, please delete it */
}
/* Hii inaingia inayotumiwa kuingiza upepo wa msingi na upepo wa mbali */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Kwenye upepo wa msingi huo, kusoma kwa ukishindwa kwa kushambulia kwa ukubwa wa 3D */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Kuingiza upepo wa msingi na upepo wa mbali */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Kuzingatia kwa upepo wa msingi (inaonekana ukichukuliwa tabia ya pili) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
/* Kuzingatia kwa upepo wa mbali */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

亲自试一试