scaleX()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Hàm scaleX() CSS function định nghĩa một phép biến đổi thay đổi kích thước phần tử dọc theo trục x (nằm ngang). Kết quả của hàm là kiểu dữ liệu <transform-function>.
Try it
transform: scaleX(1);
transform: scaleX(0.7);
transform: scaleX(1.3);
transform: scaleX(-0.5);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Hàm sửa đổi hoành độ (nằm ngang, tọa độ x) của mỗi điểm phần tử theo một hệ số không đổi, ngoại trừ khi hệ số tỉ lệ là 1, trong trường hợp đó hàm là phép biến đổi đồng nhất. Tỉ lệ không đẳng hướng, và các góc của phần tử thường không được bảo toàn, ngoại trừ bội số của 90 độ.
scaleX(-1) định nghĩa đối xứng trục, với trục thẳng đứng đi qua gốc tọa độ (như được chỉ định bởi thuộc tính transform-origin).
Note:
scaleX(sx) tương đương với
scale(sx, 1) hoặc
scale3d(sx, 1, 1).
Cú pháp
scaleX(s)
Giá trị
s-
Là
<number>biểu thị hệ số tỉ lệ áp dụng lên hoành độ (nằm ngang, tọa độ x) của mỗi điểm của phần tử.
| Tọa độ Descartes trên ℝ^2 | Tọa độ đồng nhất trên ℝℙ^2 | Tọa độ Descartes trên ℝ^3 | Tọa độ đồng nhất trên ℝℙ^3 |
|---|---|---|---|
|
|
|
|
|
[s 0 0 1 0 0] |
Cú pháp chính thức
<scaleX()> =
scaleX( <number> )
Ví dụ
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scaleX(0.6);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-scalex |
Khả năng tương thích trình duyệt
Xem thêm
scaleY()scaleZ()transformscale<transform-function>transform-origin- Các thuộc tính biến đổi riêng lẻ khác: