Cách tạo: Hộp lật 3D

Học cách sử dụng CSS để tạo hộp lật.

Cách tạo hộp lật

Bước 1 - Thêm HTML：

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Phía sau</h2>
    </div>
  </div>
</div>

Bước hai - Thêm CSS:

/* Cover box container - Set the desired width and height. We added the border property to demonstrate, the flip itself will go beyond the box when the mouse hovers (if you do not want 3D effects, please delete perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* If you do not need 3D effects, please remove this line */
}
/* this container is used to position the front and back */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Khi con trỏ di chuyển đến khối翻转盒容器, thực hiện lật nghiêng ngang */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Đặt vị trí mặt trước và mặt sau */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Đặt樣式 cho mặt trước */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Đặt樣式 cho mặt sau */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Thử trực tiếp một chút.

lật nghiêng dọc

Để thực hiện lật nghiêng dọc thay vì lật nghiêng ngang, hãy sử dụng rotateX phương pháp thay vì rotateY：

Mô hình

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Thử trực tiếp một chút.

Lưu ý:Những ví dụ này có thể không hoạt động bình thường trên máy tính bảng và/hoặc điện thoại di động.

Trang liên quan

Hướng dẫn:Chuyển đổi 2D CSS

Hướng dẫn:Chuyển đổi 3D CSS