Biến đổi-nguồn gốc - Thủ thuật CSS

Các transform-origintài sản được sử dụng kết hợp với biến đổi CSS, cho phép bạn thay đổi điểm xuất xứ của một biến đổi.

.box ( transform: rotate(360deg); transform-origin: top left; )

Như đã chỉ ra ở trên, thuộc transform-origintính có thể nhận tối đa hai giá trị từ khóa hoặc độ dài được phân tách bằng dấu cách cho một biến đổi 2D và tối đa ba giá trị cho một biến đổi 3D.

Sử dụng mã ở trên trên hộp 200px x 200px, với biến đổi được áp dụng cho một sự kiện nhấp chuột được chuyển đổi, sẽ hoạt động như sau:

Kiểm tra cây bút này!

Theo mặc định, điểm gốc của một phép biến đổi là “50% 50%”, chính xác là ở tâm của bất kỳ phần tử nhất định nào. Thay đổi điểm gốc thành “trên cùng bên trái” (như trong bản trình diễn ở trên) khiến phần tử sử dụng góc trên cùng bên trái của phần tử làm điểm xoay.

Giá trị có thể dài, tỷ lệ phần trăm hoặc các từ khóa top, left, right, bottom, và center.

Giá trị đầu tiên là vị trí nằm ngang, giá trị thứ hai là phương thẳng đứng và giá trị thứ ba đại diện cho vị trí trên trục Z. Giá trị thứ ba sẽ chỉ hoạt động nếu bạn đang sử dụng chuyển đổi 3D và nó không thể là phần trăm.

Xem hình minh họa nguồn gốc biến đổi Pen của Shaw (@shshaw) trên CodePen.