Трансформација-порекло - ЦСС-трикови

transform-originИмовина се користи у комбинацији са ЦСС трансформација, што вам омогућава да промените место порекла, уз трансформацију.

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

Као што је горе наведено, transform-originсвојство може узети до две вредности раздвојене размаком кључне речи или дужине за 2Д трансформацију и до три вредности за 3Д трансформацију.

Коришћење горњег кода на пољу од 200 пиксела са 200 пиксела, са применом трансформације на премештену помоћу клика, понашало би се овако:

Погледајте ову оловку!

Подразумевано је порекло трансформације „50% 50%“, што је тачно у центру било ког датог елемента. Промена исходишта у „горе лево“ (као у демонстрацији горе) доводи до тога да елемент користи горњи леви угао елемента као тачку ротације.

Вредности могу бити дужине, проценти или кључне речи top, left, right, bottom, и center.

Прва вредност је хоризонтални положај, друга вредност је вертикална, а трећа вредност представља положај на З оси. Трећа вредност ће функционисати само ако користите 3Д трансформације и не може бити проценат.

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