Ofset döndürme - CSS Hileleri

Bu mülk hayata başladı motion-rotation, sonra oldu offset-rotation, şimdi oldu offset-rotate. Hala bir Working Draft deneysel özelliği, yani ?‍♀️. Eğer onu kullanacaksan, en son ne ise onu kullanabilirsin.

CSS'deki offset-rotateözellik, bir öğenin offset-distancea boyunca bağlı olarak açısını kontrol eder offset-path.

Bir yol boyunca canlandırılan öğenin küçük bir yarış arabası olduğunu hayal edin. Yarış arabası yol boyunca ilerlerken, arabanın ön tarafı hareket ettiği yöne bakacak şekilde gerçekten dönmesi gerekiyor, aksi takdirde tuhaf ve doğal görünmeyecek. Neyse ki, varsayılan değeri offset-pathDİR autotam olarak bunu yapıyor.

Bu demoya bakın:

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan hareket yolunda Pen scalextric arabasına bakın
.

Olası değerler

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

Tarayıcı desteği

offset-*Özellikleri hala bu yazının yazıldığı anda deneysel bir özellik olarak kabul edilir. Tarayıcı desteğinin mevcut olmaması, onu bir projede kullanmaktan çekinmenize neden oluyorsa, bu animasyon düzeyi için GSAP kullanmayı düşünebilirsiniz. Bu size şu anda en geniş tarayıcı desteğini sunacaktır.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.