Offset-kiertää - CSS-temppuja | CSS-almanakka 2025

Tämä omaisuus alkoi elämään sellaisena motion-rotationkuin siitä tuli offset-rotation, nyt se on offset-rotate. Se on edelleen Working Draft -kokeellinen ominaisuus, joten ?‍♀️. Jos aiot käyttää sitä, voit yhtä hyvin käyttää mitä tahansa uusinta asiaa.

offset-rotateOminaisuus CSS ohjaa kulman elementin riippuen sen offset-distancepitkin offset-path.

Kuvittele, että polulla animoitu elementti on pieni kilpa-auto. Kun kilpa-auto liikkuu tietä pitkin, sen on todella pyöritettävä siten, että auton etuosa on suuntaan, johon se liikkuu, muuten se näyttää oudolta ja luonnottomalta. Onneksi oletusarvo offset-pathon se, autojoka tekee juuri sen.

Katso tämä esittely:

Katso
Chris Coyierin (@chriscoyier)
CodePen -sivustolta Pen scalextric -auto liikeradalla.

Mahdolliset arvot

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

Selaimen tuki

offset-*Ominaisuudet pidetään edelleen kokeellinen ominaisuus tätä kirjoitettaessa. Jos selaimen tuen nykyinen puute saa sinut epäröimään sen käyttämistä projektissa, sinun kannattaa harkita GSAP: n käyttöä tämän tason animaatiossa. Tämä tarjoaa sinulle laajimman selaintuen tällä hetkellä.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.