Померити-окретати - ЦСС-трикови

Ово својство је започело живот као motion-rotation, онда је постало offset-rotation, сада је offset-rotate. То је још увек експериментално својство Радне верзије, тако да ?‍♀. Ако ћете га користити, можда ћете користити и оно што је најновије.

offset-rotateИмовина у ЦСС контролише угао елемента у зависности од његове offset-distanceдуж offset-path.

Замислите да је елемент који је анимиран на стази мали тркачки аутомобил. Како се тркаћи аутомобил креће стазом, заиста треба да се окреће тако да предњи део аутомобила буде окренут у смеру у ком се креће, у супротном, изгледаће чудно и неприродно. Срећом, подразумевана вредност за offset-pathје autoуправо то.

Погледајте овај демо:

Погледајте
аутомобил Пен сцалектриц на путу кретања Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.

Могуће вредности

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

Подршка прегледача

У offset-*особине и даље сматра експериментална функција у време писања овог текста. Ако вас тренутни недостатак подршке прегледача оклева да је користите у пројекту, можда бисте желели да размислите о употреби ГСАП-а за овај ниво анимације. Ово ће вам понудити тренутно најширу подршку за прегледаче.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.