Cách lật hình ảnh

Cách lật hình ảnh

<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>
<img src="paris.jpg" alt="Paris">

Thử ngay

Chú ý:Ví dụ này không áp dụng cho máy tính bảng hoặc điện thoại.

Lưu ý:Vui lòng truy cập trang web của chúng tôi Hướng dẫn CSS 3D chuyển đổiđể biết thêm thông tin về việc chuyển đổi 3D.

Hình ảnh lật 3D có văn bản

Học cách tạo hiệu ứng lật 3D cho hình ảnh có văn bản:

Shenzhen

Một thành phố tuyệt vời

Bước 1 - Thêm HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="img_paris.jpg" alt="Paris" style="chiều rộng:300px;chiều cao:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>Thành phố tuyệt vời này</p>
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

/* Hộp lật - có thể thiết lập chiều rộng và chiều cao thành bất kỳ giá trị nào. Chúng tôi đã thêm thuộc tính viền để hiển thị khi di chuột qua翻转盒容器 sẽ lật ra ngoài hộp (nếu không muốn có hiệu ứng 3D thì hãy xóa bỏ hiệu ứng tầm nhìn). */
.flip-box {
  màu nền: trong suốt;
  chiều rộng: 300px;
  chiều cao: 200px;
  vạch: 1px rắn #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 này */
}
/* Hộp này được sử dụng để định vị mặt trước và mặt sau */
.flip-box-inner {
  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 bạn di chuột qua hộp lật, thực hiện lật ngang */
.flip-box:hover .flip-box-inner {
  transform: quay 180deg;
}
/* Định vị mặt trước và mặt sau */
.flip-box-front, .flip-box-back {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  chiều cao: 100%;
  -webkit-backface-visibility: ẩn; /* Safari */
  backface-visibility: ẩn;
}
/* Thiết lập樣式 bên mặt trước (nếu hình ảnh thiếu thì trả về) */
.flip-box-front {
  màu nền: #bbb;
  màu: đen;
}
/* Thiết kế樣式 bên mặt sau */
.flip-box-back {
  màu nền: dodgerblue;
  màu: trắng;
  transform: quay 180deg;
}

Thử ngay