translate3d()
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 translate3d() CSS function định vị lại một phần tử trong không gian 3D. Kết quả của nó là
kiểu dữ liệu <transform-function>.
Try it
transform: translate3d(0, 0, 0);
transform: translate3d(42px, -62px, -135px);
transform: translate3d(-2.7rem, 0, 1rem);
transform: translate3d(5ch, 0.4in, 5em);
<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 đặc trưng bởi một vector ba chiều [tx, ty, tz]. Các tọa độ của nó xác định phần tử di chuyển bao nhiêu theo mỗi hướng.
Cú pháp
translate3d(tx, ty, tz)
Giá trị
tx-
Là một
<length>hoặc<percentage>biểu thị hoành độ (ngang, thành phần x) của vector dịch chuyển [tx, ty, tz]. ty-
Là một
<length>hoặc<percentage>biểu thị tung độ (dọc, thành phần y) của vector dịch chuyển [tx, ty, tz]. tz-
Là một
<length>biểu thị thành phần z của vector dịch chuyển. Nó không thể là giá trị<percentage>; trong trường hợp đó, thuộc tính chứa transform được coi là không hợp lệ [tx, ty, tz].
| 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
<translate3d()> =
translate3d( <length-percentage> , <length-percentage> , <length> )
<length-percentage> =
<length> |
<percentage>
Ví dụ
Sử dụng dịch chuyển một trục
HTML
<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
<div>Tĩnh</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
Kết quả
Kết hợp dịch chuyển trục z và trục x
HTML
<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
<div>Tĩnh</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-translate3d |