Cách tạo: thẻ gập

Cách tạo thẻ gập

Bước 1 - Thêm HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="chiều rộng:300px;chiều cao:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Kiến trúc sư & Kỹ sư</p>
      <p>Chúng tôi yêu thích người đó</p>
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

/* Khung翻转卡片 - Đặt chiều rộng và chiều cao bạn muốn. Chúng tôi đã thêm thuộc tính border để minh họa rằng khi di chuột qua, lật sẽ vượt qua khung (nếu bạn không muốn có hiệu ứng 3D, hãy xóa bỏ tầm nhìn) */
.flip-card {
  màu nền: trong suốt;
  chiều rộng: 300px;
  chiều cao: 200px;
  biên: 1px chạm #f1f1f1;
  tầm nhìn: 1000px; /* Nếu bạn không muốn có hiệu ứng 3D, hãy xóa bỏ tầm nhìn */
{}
/* Khung này được sử dụng để định vị mặt trước và mặt sau */
.flip-card-inner {
  chỉnh vị trí: tương đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  canh chỉnh văn bản: giữa;
  transition: transform 0.8s;
  transform-style: giữ 3D;
{}
/* Khi chuột đè lên khung翻转卡片, thực hiện lật ngang */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
{}
/* Đặt vị trí cho mặt trước và mặt sau */
.flip-card-front, .flip-card-back {
  chỉnh vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  -webkit-backface-visibility: ẩn; /* Safari */
  backface-visibility: ẩn;
{}
/* Đặt樣式 cho mặt trước (nếu hình ảnh bị thiếu thì sử dụng dự phòng) */
.flip-card-front {
  màu nền: #bbb;
  màu: đen;
{}
/* Đặt樣式 cho mặt sau */
.flip-card-back {
  màu nền: dodgerblue;
  màu: trắng;
  transform: rotateY(180deg);
{}

Thử ngay