Pārveidot izcelsmi - CSS-triki

transform-originĪpašums tiek izmantots kopā ar CSS pārveidojumus, ļaujot jums mainīt punktu izcelsmi pārveidot.

.box ( transform: rotate(360deg); transform-origin: top left; )

Kā norādīts iepriekš, transform-originrekvizīts var aizņemt līdz divām atstarpēm atdalītām atslēgvārda vai garuma vērtībām 2D transformācijai un līdz trim vērtībām 3D transformācijai.

Izmantojot iepriekš minēto kodu lodziņā 200 x 200 pikseļi, transformācijai, kas piemērota pārejai, izmantojot klikšķa notikumu, rīkotos šādi:

Pārbaudiet šo pildspalvu!

Pēc noklusējuma transformācijas izcelsme ir “50% 50%”, kas ir tieši jebkura norādītā elementa centrā. Mainot izcelsmi uz “kreisajā augšējā stūrī” (tāpat kā iepriekš redzamajā demonstrācijā), elements kā elementa rotācijas punktu izmanto elementa augšējo kreiso stūri.

Vērtības var būt garumi, procenti vai atslēgvārdiem top, left, right, bottom, un center.

Pirmā vērtība ir horizontālā pozīcija, otrā vērtība ir vertikālā, bet trešā vērtība norāda pozīciju uz Z ass. Trešā vērtība darbosies tikai tad, ja izmantojat 3D pārveidojumus, un tā nevar būt procentuālā vērtība.

Skatiet Shaw (@shshaw) Pildspalvas pārveidošanas izcelsmes ilustrāciju vietnē CodePen.