Sukarelawan kami masih belum menterjemah artikel ini ke bahasa Melayu. Sertai kami dan bantu melaksanakannya!
Anda juga boleh membaca artikel ini dalam bahasa English (US).

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type.

Note: translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0).

Syntax

translateY(t)

Values

t
Is a <length> representing the ordinate of the translating vector.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

A translation is not a linear transformation in ℝ2 and can't be represented using a Cartesian-coordinate matrix.

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

Examples

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}

Result

Specifications

Specification Status Comment
CSS Transforms Level 1
The definition of 'translateY()' in that specification.
Working Draft Initial definition

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

Tag Dokumen dan Penyumbang

Terakhir dikemaskini oleh: mdnwebdocs-bot,