CSS transform-origin property sử dụng như thế nào ?

CSS transform-origin property được sử dụng để thay đổi vị trí của các phần tử đã được chuyển đổi. Đây là một điểm xung quanh mà các phép biến đổi được áp dụng. Nó thiết lập nguồn gốc của sự biến đổi của một phần tử. Nó có thể được áp dụng cho cả 2D và 3D quay. Thuộc tính transform-origin phải được sử dụng với thuộc tính transform. Biến đổi 2D có thể thay đổi trục x và y của phần tử, trong khi biến đổi 3D có thể thay đổi trục z cùng với trục x và y.

Thuộc tính này có thể được chỉ định bằng cách sử dụng một, hai hoặc ba giá trị. Giá trị đầu tiên ảnh hưởng đến vị trí ngang, giá trị thứ hai ảnh hưởng đến vị trí dọc, và giá trị thứ ba chỉ ra vị trí của trục z. Giá trị thứ ba cũng có thể hoạt động trên các biến đổi 3D và không thể được xác định bằng cách sử dụng phần trăm. Nếu chỉ định một giá trị, giá trị đó phải là độ dài hoặc phần trăm hoặc một trong các giá trị từ khóa left, center, right, top và bottom. Nếu chỉ định hai giá trị, giá trị đầu tiên phải là độ dài hoặc phần trăm hoặc các giá trị từ khóa left, right và center. Giá trị thứ hai phải là độ dài hoặc phần trăm hoặc một trong các giá trị từ khóa center, top và bottom. Khi chúng ta chỉ định ba giá trị, thì hai giá trị đầu tiên giống như cú pháp hai giá trị, nhưng giá trị thứ ba đại diện cho z-offset, vì vậy nó phải là một độ dài.

Giá trị mặc định của thuộc tính CSS transform-origin property là 50% 50%, đại diện cho trung tâm của phần tử.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS transform-origin property là gì ?

CSS transform-origin property được sử dụng để xác định điểm gốc của phép biến đổi trên các phần tử. Thuộc tính này có thể được áp dụng cho cả biến đổi 2D và 3D. Biến đổi 2D thay đổi trục x và y của phần tử, trong khi biến đổi 3D thay đổi trục z cùng với trục x và y.

Thuộc tính CSS transform-origin property phải được sử dụng cùng với thuộc tính transform để xác định điểm bắt đầu của phép biến đổi. Nó có thể được chỉ định bằng cách sử dụng một, hai hoặc ba giá trị. Giá trị đầu tiên ảnh hưởng đến vị trí ngang, giá trị thứ hai ảnh hưởng đến vị trí dọc, và giá trị thứ ba chỉ ra vị trí của trục z.

CSS transform-origin property được sử dụng bởi những người thiết kế web và nhà phát triển web để hiển thị các phần tử trên trang web của họ. Các phần tử này có thể là văn bản, hình ảnh, video hoặc bất kỳ thứ gì mà họ muốn chuyển đổi để tạo ra hiệu ứng trực quan và thu hút người dùng. Thuộc tính này có thể được sử dụng để tạo ra các hiệu ứng chuyển động và xoay cho các phần tử trên trang web.

Sử dụng CSS transform-origin property

Thuộc tính CSS transform-origin property được sử dụng để xác định điểm gốc của phép biến đổi trên một phần tử. Nó giúp xác định vị trí bắt đầu của phép biến đổi, do đó giúp kiểm soát nơi mà phần tử thay đổi hình dạng, vị trí hoặc kích thước. Thuộc tính này được sử dụng cùng với thuộc tính transform để thực hiện các phép biến đổi trên phần tử.

Có thể chỉ định CSS transform-origin property bằng cách sử dụng một, hai hoặc ba giá trị. Giá trị đầu tiên ảnh hưởng đến vị trí ngang, giá trị thứ hai ảnh hưởng đến vị trí dọc, và giá trị thứ ba chỉ ra vị trí của trục z. Khi chỉ định một giá trị, giá trị đó phải là độ dài hoặc phần trăm hoặc một trong các giá trị từ khóa left, center, right, top và bottom. Nếu chỉ định hai giá trị, giá trị đầu tiên phải là độ dài hoặc phần trăm hoặc các giá trị từ khóa left, right và center. Giá trị thứ hai phải là độ dài hoặc phần trăm hoặc một trong các giá trị từ khóa center, top và bottom. Khi chỉ định ba giá trị, hai giá trị đầu tiên giống như cú pháp hai giá trị, nhưng giá trị thứ ba đại diện cho z-offset, vì vậy nó phải là một độ dài.

Hướng dẫn CSS transform-origin property

Để sử dụng thuộc tính CSS transform-origin property, bạn cần biết cách chỉ định các giá trị cho nó. Các giá trị này có thể được chỉ định bằng cách sử dụng các đơn vị đo lường như px, em hoặc phần trăm. Bạn cũng có thể sử dụng các giá trị từ khóa như left, center hoặc bottom để chỉ định vị trí của điểm bắt đầu cho phép biến đổi.

Ví dụ, để xác định điểm bắt đầu quay của một hình chữ nhật, bạn có thể sử dụng mã sau đây:

transform-origin: top left;

Điều này sẽ giúp xác định điểm gốc của phép biến đổi trên hình chữ nhật ở góc trên bên trái.

Ví dụ CSS transform-origin property

CSS transform-origin property cho phép bạn chỉ định điểm gốc của các phép biến đổi áp dụng cho một phần tử.

Giá trị mặc định của thuộc tính này là 50% 50%, có nghĩa là điểm gốc là trung tâm của phần tử.

Để chỉ định điểm gốc của các phép biến đổi, bạn có thể sử dụng hai giá trị số. Giá trị đầu tiên đại diện cho tọa độ x của điểm gốc, giá trị thứ hai đại diện cho tọa độ y của điểm gốc. Giá trị này phải là số thực nằm trong khoảng từ 0 đến 1.

Ví dụ:

// Để đặt điểm gốc là góc trên bên trái của một phần tử
div {
  transform-origin: 0 0;
}

Ví dụ này sẽ đặt điểm gốc là góc trên bên trái của phần tử div.

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS transform-origin property:

Để đặt điểm gốc là góc trên bên trái của một phần tử, bạn có thể sử dụng transform-origin: 0 0;.

div {
  transform-origin: 0 0;
}

Để đặt điểm gốc là góc trên bên phải của một phần tử, bạn có thể sử dụng transform-origin: 1 0;.

div {
  transform-origin: 1 0;
}

Để đặt điểm gốc là góc dưới bên trái của một phần tử, bạn có thể sử dụng transform-origin: 0 1;.

div {
  transform-origin: 0 1;
}

Để đặt điểm gốc là góc dưới bên phải của một phần tử, bạn có thể sử dụng transform-origin: 1 1;.

div {
  transform-origin: 1 1;
}

Để đặt điểm gốc là tâm của một phần tử, bạn có thể sử dụng transform-origin: 50% 50%;.

div {
  transform-origin: 50% 50%;
}

Để đặt điểm gốc là một điểm tùy chỉnh trong phần tử, bạn có thể sử dụng transform-origin: 10px 20px;.

div {
  transform-origin: 10px 20px;
}

Ưu và Nhược điểm CSS transform-origin property

Thuộc tính CSS transform-origin property có một số ưu điểm, bao gồm:

• Giúp kiểm soát nơi phần tử thay đổi kích thước, vị trí hoặc hình dạng
• Cho phép tạo ra các hiệu ứng chuyển động và xoay trực quan cho phần tử
• Có thể được sử dụng cùng với biến đổi 2D và 3D

Nhược điểm của thuộc tính CSS transform-origin property:

• Không phù hợp cho các phần tử không được biến đổi hoặc có hiệu ứng khác
• Có thể gây khó khăn trong việc kiểm soát vị trí và kích thước của phần tử nếu sử dụng không đúng cách

Lời khuyên CSS transform-origin property

Để sử dụng thuộc tính CSS transform-origin property một cách hiệu quả, bạn nên cân nhắc các lời khuyên sau:

• Chỉ định giá trị cho thuộc tính này một cách chính xác để tránh tình trạng phần tử bị sai vị trí hoặc kích thước
• Sử dụng các giá trị từ khóa có sẵn để giúp xác định vị trí điểm gốc một cách dễ dàng hơn
• Khi sử dụng biến đổi 3D, chỉ định đúng giá trị cho trục z để tránh hiện tượng phần tử bị xoay sai hướng
• Kiểm tra kết quả hiển thị của phần tử sau khi đã áp dụng thuộc tính transform-origin để đảm bảo rằng nó được hiển thị chính xác.