57. Image Reflection Trong CSS

Image Reflection trong CSS:

Hiện tại, CSS không hỗ trợ trực tiếp tạo hiệu ứng phản chiếu (reflection) cho hình ảnh như các công nghệ khác (ví dụ: Flash). Tuy nhiên, bạn có thể tạo hiệu ứng phản chiếu bằng cách sử dụng CSS và HTML để tạo một hình ảnh giả mạo dưới hình ảnh gốc. Dưới đây là một ví dụ về cách tạo hiệu ứng phản chiếu bằng CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .reflection-container {
      position: relative;
      width: 300px;
      height: auto;
    }

    .reflection-image {
      width: 100%;
      height: auto;
      display: block;
    }

    .reflection {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      opacity: 0.4;
      transform: scaleY(-1);
      transform-origin: bottom;
    }
  </style>
</head>
<body>
  <div class="reflection-container">
    <img class="reflection-image" src="your-image.jpg" alt="Original Image">
    <img class="reflection" src="your-image.jpg" alt="Reflection Image">
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một hình ảnh gốc và một hình ảnh phản chiếu bằng cách sử dụng thẻ img.
Hình ảnh gốc và hình ảnh phản chiếu được đặt trong một phần tử cha có class .reflection-container.
Sử dụng CSS để điều chỉnh vị trí và kiểu hiển thị của các hình ảnh.
Sử dụng transform: scaleY(-1); để lật ngược hình ảnh phản chiếu theo trục y.
Sử dụng transform-origin: bottom; để đảm bảo rằng hiệu ứng phản chiếu xuất phát từ phía dưới.

Lưu ý rằng cách này tạo hiệu ứng phản chiếu thông qua hình ảnh giả mạo và các hiệu ứng không thực sự phản chiếu thực sự. Hiệu ứng có thể không hoàn hảo và phụ thuộc vào nội dung và thiết kế cụ thể.

Leave a Comment Cancel Reply