Mengimbangi-memutar - Trik CSS

Harta ini memulakan kehidupan seperti motion-rotation, kemudian menjadi offset-rotation, sekarang offset-rotate. Ia masih merupakan harta eksperimen Draf Kerja sehingga ?‍♀️. Sekiranya anda akan menggunakannya, anda mungkin menggunakan apa sahaja yang paling baru.

The offset-rotateharta di CSS mengawal sudut unsur bergantung kepada mereka offset-distancedi sepanjang offset-path.

Bayangkan elemen yang dianimasikan di sepanjang jalan adalah kereta lumba kecil. Semasa kereta lumba bergerak di sepanjang jalan, ia benar-benar perlu dipusingkan sehingga bahagian depan kereta menghadap ke arah yang bergerak, jika tidak, ia akan kelihatan pelik dan tidak wajar. Syukurlah, nilai lalai offset-pathadalah autoyang betul-betul melakukannya.

Lihat demo ini:

Lihat
kereta skala Pen pada gerakan-jalan oleh Chris Coyier (@chriscoyier)
di CodePen.

Nilai Kemungkinan

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

Sokongan penyemak imbas

The offset-*hotel masih dianggap ciri eksperimen pada masa penulisan ini. Sekiranya kekurangan sokongan penyemak imbas semasa membuat anda ragu untuk menggunakannya pada projek, maka anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk tahap animasi ini. Ini akan memberi anda sokongan penyemak imbas terluas buat masa ini.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.