Tài sản này bắt đầu cuộc sống như motion-rotation, sau đó nó trở thành offset-rotation, bây giờ là offset-rotate. Nó vẫn là một thuộc tính thử nghiệm của Bản thảo đang làm việc nên ?♀️. Nếu bạn định sử dụng nó, bạn cũng có thể sử dụng bất cứ thứ gì gần đây nhất.
Các offset-rotatebất động sản trong CSS điều khiển góc của một phần tử tùy thuộc vào nó offset-distancedọc theo một con offset-path.
Hãy tưởng tượng yếu tố được hoạt hình dọc theo một con đường là một chiếc xe đua nhỏ. Khi chiếc xe đua di chuyển dọc theo con đường, nó thực sự cần phải xoay sao cho phần đầu của chiếc xe hướng về hướng nó đang di chuyển, nếu không, nó sẽ trông rất kỳ cục và không tự nhiên. Rất may, giá trị mặc định cho offset-pathlà giá trị autothực hiện chính xác điều đó.
Xem bản trình diễn này:
Xem
chiếc xe theo tỷ lệ Pen trên đường chuyển động của Chris Coyier (@chriscoyier)
trên CodePen.
Những giá trị khả thi
.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )Hỗ trợ trình duyệt
Các offset-*thuộc tính vẫn được coi là một tính năng thử nghiệm tại thời điểm viết bài này. Nếu việc thiếu hỗ trợ trình duyệt hiện tại khiến bạn do dự khi sử dụng nó trong một dự án, thì bạn có thể muốn xem xét sử dụng GSAP cho mức hoạt ảnh này. Điều này sẽ cung cấp cho bạn hỗ trợ trình duyệt rộng nhất tại thời điểm này.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 46 | 72 | Không | 79 | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Không |
Kể từ Chrome 46 và Opera 33 (và các phiên bản di động có liên quan), chúng tôi có "hỗ trợ ban đầu" trong Blink (không có cờ).
thông tin thêm
- Thông số: Thông số mô-đun đường dẫn chuyển động cấp 1
- Bộ sưu tập các ví dụ trên CodePen
- Sử dụng trong tương lai: Đường dẫn chuyển động CSS của Dan Wilson
- Vé WebKit # 139128
- Vé Mozilla số 1186329
- Yêu cầu tính năng của Microsoft Edge
- Trạng thái nền tảng Chrome: Mẫu và đường dẫn chuyển động CSS
- MDN: bù đắp (liên kết đến các thuộc tính liên quan khác)