Преобразуване-произход - CSS-трикове

В transform-originимота се използва във връзка с CSS трансформации, като ви позволява да се промени мястото на произход на трансформация.

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

Както е посочено по-горе, transform-originсвойството може да отнеме до две стойности на ключова дума или дължина, разделени с интервал, за 2D трансформация и до три стойности за 3D трансформация.

Използването на горния код в поле 200px на 200px, с преобразуването, приложено към прехвърлено с помощта на събитие щракване, ще се държи по следния начин:

Вижте тази писалка!

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

Стойностите могат да бъдат дължини, проценти или ключови думи top, left, right, bottom, и center.

Първата стойност е хоризонталната позиция, втората стойност е вертикалната, а третата стойност представлява позицията по оста Z. Третата стойност ще работи само ако използвате 3D трансформации и не може да бъде процент.

Вижте илюстрацията за преобразуване на произхода на писалката от Shaw (@shshaw) на CodePen.