کیسے بنائیں: فلیپ کارڈ

کیسے فلیپ کارڈ بنائیں؟

پہلے قدم - ایچ آر آر کا اضافہ:

<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>بیل گیتس</h1>
      <p>معماری و مهندس</p>
      <p>ما آن فرد را دوست داریم</p>
    </div>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

/* کانتینر کارت چرخان - تنظیم عرض و ارتفاع مورد نظر خود را انجام دهید. ما به دلیل نمایش چرخش کارت در حالت قرارگیری موشواره، پیرامون را حذف کردیم (اگر نمی‌خواهید تأثیر سه‌بعدی داشته باشد، دیدگاه را حذف کنید) */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* اگر نمی‌خواهید تأثیر سه‌بعدی داشته باشد، آن را حذف کنید */
}
/* این کانتینر برای قرارگیری جلو و پشت استفاده می‌شود */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* در حالت قرارگیری موشواره روی قابلیت چرخش کارت، به صورت افقی چرخش می‌یابد */
.flip-card:hover .flip-card-inner {
  ترasnform: rotateY(180deg);
}
/* قرارگیری جلو و پشت */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* تنظیمات استایل جلو (در صورت فقدان تصویر به عنوان جایگزین استفاده می‌شود) */
.flip-card-front {
  background-color: #bbb;
  رنگ: سیاه;
}
/* تنظیمات استایل پشت */
.flip-card-back {
  background-color: dodgerblue;
  رنگ: سفید;
  ترasnform: rotateY(180deg);
}

آزمایش کنید