translateZ()
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 translateZ() CSS function định vị lại một phần tử dọc theo trục z trong không gian 3D, tức là
gần hơn hoặc xa hơn người xem. Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: translateZ(0);
transform: translateZ(42px);
transform: translateZ(-9.7rem);
transform: translateZ(-3ch);
<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 biến đổi này được xác định bởi một <length> chỉ định phần tử hoặc các phần tử di chuyển bao nhiêu vào trong hay ra ngoài.
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:
translateZ(tz) tương đương với
translate3d(0, 0, tz).
Cú pháp
translateZ(tz)
Giá trị
tz-
Một
<length>biểu thị thành phần z của vector dịch chuyển [0, 0, tz]. Trong hệ tọa độ Descartes, nó biểu thị độ dịch chuyển dọc theo trục z. Giá trị dương di chuyển phần tử về phía người xem, còn giá trị âm di chuyển ra xa hơn.
| 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. | Phép dịch chuyển không phải là phép biến đổi tuyến tính trong ℝ^3 và không thể biểu diễn bằng ma trận tọa độ Descartes. |
|
|
Cú pháp chính thức
<translateZ()> =
translateZ( <length> )
Ví dụ
Trong ví dụ này, hai hộp được tạo ra. Một hộp được định vị bình thường trên trang, không có bất kỳ phép dịch chuyển nào. Hộp thứ hai được thay đổi bằng cách áp dụng perspective để tạo không gian 3D, sau đó di chuyển về phía người dùng.
HTML
<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
CSS
div {
position: relative;
width: 60px;
height: 60px;
left: 100px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translateZ(200px);
background-color: pink;
}
Điều quan trọng ở đây là lớp "moved"; hãy xem nó làm gì. Đầu tiên, hàm
perspective() định vị
người xem tương đối với mặt phẳng nằm ở z=0 (về cơ bản, bề mặt của màn hình). Giá trị
500px có nghĩa là người dùng ở cách "500 pixel" phía trước hình ảnh ở z=0.
Sau đó, hàm translateZ() di chuyển phần tử 200 pixel "ra ngoài" màn hình, về phía người dùng.
Điều này tạo ra hiệu ứng khiến phần tử xuất hiện lớn hơn khi xem trên màn hình 2D, hoặc gần hơn khi xem qua kính thực tế ảo
hay thiết bị hiển thị 3D khác.
Lưu ý rằng nếu giá trị perspective() nhỏ hơn giá trị translateZ(), chẳng hạn
transform: perspective(200px) translateZ(300px); thì phần tử được biến đổi sẽ không hiển thị vì nó
ở xa hơn viewport của người dùng. Chênh lệch càng nhỏ giữa giá trị perspective và translateZ, người dùng càng gần phần tử và phần tử được dịch chuyển càng có vẻ lớn hơn.
Note:
Vì phép hợp thành các biến đổi không có tính giao hoán, thứ tự bạn viết các hàm khác nhau là quan trọng. Nói chung, bạn muốn đặt perspective() trước translateZ().
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-translatez |