scale()

Try it

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Phép biến đổi tỉ lệ này được đặc trưng bởi một vectơ hai chiều. Tọa độ của nó xác định lượng tỉ lệ thực hiện theo mỗi chiều. Nếu cả hai tọa độ bằng nhau, tỉ lệ là đồng đều (đẳng hướng) và tỉ lệ khung hình của phần tử được giữ nguyên (đây là phép biến đổi đồng dạng).

Khi giá trị tọa độ nằm ngoài phạm vi [-1, 1], phần tử lớn ra theo chiều đó; khi nằm bên trong, nó thu nhỏ lại. Giá trị âm dẫn đến phép đối xứng qua điểm theo chiều đó. Giá trị 1 không có tác dụng.

Cú pháp

scale(sx)

scale(sx, sy)

Giá trị

sx

Một <number> hoặc <percentage> biểu thị hoành độ (nằm ngang, thành phần x) của vectơ tỉ lệ.

sy Optional

Một <number> hoặc <percentage> biểu thị tung độ (thẳng đứng, thành phần y) của vectơ tỉ lệ. Nếu không được xác định, giá trị mặc định là sx, dẫn đến tỉ lệ đồng đều giữ nguyên aspect ratio của phần tử.

Cú pháp chính thức

<scale()> = 
  scale( <number> , <number>? )  

Khả năng tiếp cận

Hoạt ảnh phóng to/thu nhỏ gây ra vấn đề về khả năng tiếp cận, vì chúng thường là tác nhân gây ra một số loại đau nửa đầu. Nếu bạn cần đưa các hoạt ảnh như vậy vào trang web, bạn nên cung cấp điều khiển cho phép người dùng tắt hoạt ảnh, tốt nhất là trên toàn trang.

Ngoài ra, hãy cân nhắc sử dụng tính năng media prefers-reduced-motion — dùng nó để viết truy vấn media sẽ tắt hoạt ảnh nếu người dùng đã chỉ định giảm hoạt ảnh trong tùy chọn hệ thống.

Tìm hiểu thêm:

• MDN Understanding WCAG, Guideline 2.3 explanations
• Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

Ví dụ

Thay đổi tỉ lệ theo cả chiều X và Y

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

Kết quả

Thay đổi tỉ lệ X và Y riêng biệt và dịch chuyển gốc tọa độ

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• transform
• scale
• zoom
• <transform-function>
• scale3d()
• Các thuộc tính biến đổi riêng lẻ khác translate và rotate