scaleZ()
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 scaleZ() CSS function định nghĩa một phép biến đổi thay đổi kích thước một phần tử dọc theo
trục z. Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: scaleZ(1);
transform: scaleZ(1.4);
transform: scaleZ(0.5);
transform: scaleZ(-1.4);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
Phép co giãn này thay đổi tọa độ z của mỗi điểm trong phần tử theo một hệ số không đổi, ngoại trừ khi
hệ số co giãn là 1, trong trường hợp đó hàm là phép biến đổi đồng nhất. Việc co giãn không đẳng hướng, và các góc
của phần tử không được bảo toàn. scaleZ(-1) định nghĩa một đối xứng trục, với trục z đi qua gốc tọa độ
(như được chỉ định bởi thuộc tính transform-origin).
Trong các ví dụ tương tác trên, perspective: 550px; (để
tạo không gian 3D) và transform-style: preserve-3d;
(để các phần tử con, 6 mặt của khối lập phương, cũng được định vị trong không gian 3D), đã được thiết lập trên khối lập phương.
Note:
scaleZ(sz) tương đương với
scale3d(1, 1, sz).
Cú pháp
scaleZ(s)
Giá trị
| Tọa độ Descartes trên ℝ^2 | Tọa độ thuần nhất trên ℝℙ^2 | Tọa độ Descartes trên ℝ^3 | Tọa độ thuần nhất trên ℝℙ^3 |
|---|---|---|---|
| Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng. |
|
|
|
Cú pháp chính thức
<scaleZ()> =
scaleZ( [ <number> | <percentage> ] )
Ví dụ
HTML
<div>Bình thường</div>
<div class="perspective">Đã dịch chuyển</div>
<div class="scaled-translated">Đã co giãn</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.perspective {
/* Includes a perspective to create a 3D space */
transform: perspective(400px) translateZ(-100px);
background-color: limegreen;
}
.scaled-translated {
/* Includes a perspective to create a 3D space */
transform: perspective(400px) scaleZ(2) translateZ(-100px);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-scalez |
Khả năng tương thích trình duyệt
Xem thêm
scaleX()scaleY()transform<transform-function>transform-origin- Các thuộc tính biến đổi riêng lẻ: