Offset-putar - Trik CSS | CSS Almanak 2024

Properti ini memulai kehidupan seperti motion-rotation, kemudian menjadi offset-rotation, sekarang offset-rotate. Ini masih merupakan properti eksperimental Konsep Kerja jadi ?‍♀️. Jika Anda akan menggunakannya, Anda sebaiknya menggunakan apa pun yang terbaru.

The offset-rotateproperti di CSS mengontrol sudut elemen tergantung pada nya offset-distancesepanjang offset-path.

Bayangkan elemen yang dianimasikan di sepanjang jalur adalah mobil balap kecil. Saat mobil balap melaju di sepanjang jalurnya, memang perlu diputar agar bagian depan mobil menghadap ke arah pergerakannya, jika tidak maka akan terlihat aneh dan tidak wajar. Untungnya, nilai defaultnya offset-pathadalah autoyang melakukan hal itu.

Lihat demo ini:

Lihat
mobil skalekstrik Pena di jalur gerak oleh Chris Coyier (@chriscoyier)
di CodePen.

Nilai yang Mungkin

.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 */ )

Dukungan browser

The offset-*sifat masih dianggap sebagai fitur eksperimental pada saat tulisan ini. Jika kurangnya dukungan browser saat ini membuat Anda ragu-ragu untuk menggunakannya pada suatu proyek, maka Anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk level animasi ini. Ini akan menawarkan Anda dukungan browser terluas saat ini.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.