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.

translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為資料型別。

嘗試一下

transform: translate3d(0);

transform: translate3d(42px, -62px, -135px);

transform: translate3d(-2.7rem, 0, 1rem);

transform: translate3d(5ch, 0.4in, 5em);

#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: 其代表平移向量的橫坐標。
ty: 其代表平移向量的縱坐標。
tz: 其代表平移向量的 z 分量。數值不能是：否則，此轉場的屬性無效。

ℝ² 上的笛卡兒座標（Cartesian coordinate）	ℝℙ² 上的齊次坐標（homogeneous coordinates）	ℝ³ 上的笛卡兒座標	ℝℙ³ 上的齊次坐標
This transformation applies to the 3D space and can't be represented on the plane.		A translation is not a linear transformation in ℝ³ and can't be represented using a Cartesian-coordinate matrix.	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{matrix})$

示例

使用單軸平移

HTML

html

Static
Moved
Static

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

Static
Moved
Static

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