translate()

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 translate() CSS function định vị lại một phần tử theo hướng ngang và/hoặc dọc. Kết quả của nó là kiểu dữ liệu <transform-function>.

Try it

transform: translate(0);

transform: translate(42px, 18px);

transform: translate(-2.1rem, -2ex);

transform: translate(3ch, 3mm);

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

Phép biến đổi này được đặc trưng bởi một vector hai chiều [tx, ty]. 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

css

/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Giá trị

Giá trị <length-percentage> đơn: Giá trị này 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, 0]. Tung độ (dọc, thành phần y) của vector dịch chuyển sẽ được đặt thành 0. Ví dụ, translate(2px) tương đương với translate(2px, 0). Giá trị phần trăm tham chiếu đến chiều rộng của hộp tham chiếu được xác định bởi thuộc tính transform-box.
Giá trị <length-percentage> kép: Giá trị này mô tả hai giá trị <length> hoặc <percentage> biểu thị cả hoành độ (ngang, thành phần x) và tung độ (dọc, thành phần y) của vector dịch chuyển [tx, ty]. Giá trị phần trăm thứ nhất tham chiếu đến chiều rộng, giá trị thứ hai tham chiếu đến chiều cao của hộp tham chiếu được xác định bởi thuộc tính transform-box.

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 dịch chuyển không phải là phép biến đổi tuyến tính trong ℝ^2 và không thể biểu diễn bằng ma trận tọa độ Descartes.	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 0 1 tx ty]`

Cú pháp chính thức

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<length-percentage> = 
  <length>      |
  <percentage>

Ví dụ

Sử dụng dịch chuyển một trục

HTML

html

<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
<div>Tĩnh</div>

CSS

css

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

.moved {
  /* Equal to: translateX(10px) or translate(10px, 0) */
  transform: translate(10px);
  background-color: pink;
}

Kết quả

Kết hợp dịch chuyển trục y và trục x

HTML

html

<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
<div>Tĩnh</div>

CSS

css

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

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

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 1 # funcdef-transform-translate

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content