Làm cách nào để phản chiếu CSS văn bản?

Question

Tìm hiểu cách lật ảnh (thêm hiệu ứng phản chiếu) bằng CSS

Nội dung chính Show

Lật hình ảnh 3D với văn bản
Chia sẻ cái này

Di chuột qua hình ảnh

Thí dụ

Tự mình thử »

Ghi chú. Ví dụ này không hoạt động trên máy tính bảng hoặc điện thoại di động

Mẹo. Truy cập Hướng dẫn chuyển đổi CSS 3D của chúng tôi để tìm hiểu thêm về chuyển đổi 3D

Lật hình ảnh 3D với văn bản

Tìm hiểu cách thực hiện lật hình ảnh 3D hoạt hình bằng văn bản

Paris

Thật là một thành phố tuyệt vời

Bước 1) Thêm HTML

Thí dụ

Paris

Thật là một thành phố tuyệt vời

Bước 2) Thêm CSS

Thí dụ

/* Bộ chứa hộp lật - đặt chiều rộng và chiều cao thành bất cứ thứ gì bạn muốn. Chúng tôi đã thêm thuộc tính đường viền để chứng minh rằng bản thân phần lật ra khỏi hộp khi di chuột (xóa phối cảnh nếu bạn không muốn hiệu ứng 3D */
hộp lật {
màu nền. trong suốt;
bề rộng. 300px;
chiều cao. 200px;
biên giới. 1px cố định #f1f1f1;
luật xa gần. 1000px;
}

/* Container này cần thiết để định vị mặt trước và mặt sau */
flip-box-bên trong {
Chức vụ. liên quan đến;
bề rộng. 100%;
chiều cao. 100%;
căn chỉnh văn bản. trung tâm;
chuyển tiếp. biến đổi 0. 8s;
phong cách biến đổi. bảo quản-3d;
}

/* Thực hiện thao tác lật ngang khi bạn di chuột qua hộp chứa hộp lật */
hộp lật. bay lượn. flip-box-bên trong {
biến đổi. xoayY(180 độ);
}

/* Định vị mặt trước và mặt sau */
hộp lật phía trước,. flip-box-back {
Chức vụ. tuyệt đối;
bề rộng. 100%;
chiều cao. 100%;
-webkit-backface-khả năng hiển thị. hidden; /* Safari */
khả năng hiển thị backface. ẩn giấu;
}

/* Tạo kiểu cho mặt trước (dự phòng nếu thiếu hình ảnh) */
flip-box-front {
màu nền. #bbb;
màu. màu đen;
}

/* Tạo kiểu cho mặt sau */
flip-box-back {
màu nền. màu xanh da trời;
màu. trắng;
biến đổi. xoayY(180 độ);
}

Tự mình thử »

Đối với các ngôn ngữ viết từ phải sang trái, bạn có thể hoán đổi bố cục mặc định từ trái sang phải trong hầu hết các trình duyệt chỉ bằng thuộc tính dir

<body dir="rtl">
  text in right-to-left language
</body>

Bạn có thể sử dụng thuộc tính đó trên bất kỳ thành phần văn bản nào, không nhất thiết phải là phần thân. Tương tự như vậy, bạn có thể hoán đổi nó chỉ bằng CSS

Để tạo Hiệu ứng văn bản phản chiếu/gương CSS, hãy làm theo các bước bên dưới và xem video hướng dẫn

Thêm HTML
Thêm CSS

Bước 1

Thêm HTML

<div class="mirror-text">MIRROR
</div>

Bước 2

Thêm CSS

Đặt màu và vị trí của nền và các thành phần

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Tạo kiểu cho văn bản và tạo hiệu ứng gương

.mirror-text {
  position: relative;
  font-size:120px;
  font-weight: 900;
  font-family: arial;
  color: #4895ef;
}

.mirror-text:before {
  content:"MIRROR";
  position: absolute;
  top:85px;
  transform: rotate(180deg) scaleX(-1);
  opacity:0.5;
  
}

.mirror-text:after {
  content:"";
  position: absolute;
  left:0;
  width:850px;
  height:100px;
  top:105px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,1) 100%);
}

Thêm quy tắc CSS @media để hiển thị hiệu ứng chính xác trên màn hình nhỏ hơn

@media only screen and (max-width: 600px) {
  .mirror-text {
    font-size: 80px;
  }
  .mirror-text:before {
    top:60px;
  }
  .mirror-text:after {
    top:55px;
  }
}

Xem thêm video hướng dẫn

Thưởng thức mã hóa

Đọc thêm

CSS Slide Text Animation/Slide Effect

Hiệu ứng văn bản cắt lát CSS

Làm cách nào để thay đổi văn bản trên Hover?