此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
translate3d()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為 <transform-function> 資料型別。
嘗試一下
transform: translate3d(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: rgba(90, 90, 90, 0.7);
transform: translateZ(50px);
}
.back {
background: rgba(0, 210, 0, 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 210, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210, 210, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210, 0, 210, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
這個轉場的特徵是三維向量,其坐標則定義元素的方向該如何移動。
語法
translate3d(tx, ty, tz)
數值
tx-
其
<length>代表平移向量的橫坐標。 ty-
其
<length>代表平移向量的縱坐標。 tz-
其
<length>代表平移向量的 z 分量。數值不能是<percentage>:否則,此轉場的屬性無效。
| R2 上的笛卡兒座標(Cartesian coordinate) | RP2 上的齊次坐標(homogeneous coordinates) | R3 上的笛卡兒座標 | RP3 上的齊次坐標 |
|---|---|---|---|
|
This transformation applies to the 3D space and can't be represented on the plane. |
A translation is not a linear transformation in R3 and can't be represented using a Cartesian-coordinate matrix. | ||
示例
使用單軸平移
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
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;
}
結果
[フレーム]
Combining z-axis and x-axis translation
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
結果
[フレーム]
規範
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-translate3d |
瀏覽器相容性
請參見 <transform-function>。