Pochodzenie transformacji - CSS-Tricks

transform-originWłaściwość jest używana w połączeniu z transformacji CSS, co pozwala zmienić punkt pochodzenia transformacji.

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

Jak wskazano powyżej, transform-originwłaściwość może przyjmować do dwóch słów kluczowych oddzielonych spacjami lub wartości długości w przypadku transformacji 2D i do trzech wartości w przypadku transformacji 3D.

Użycie powyższego kodu na pudełku o wymiarach 200 na 200 pikseli, z transformacją zastosowaną do przejścia za pomocą zdarzenia kliknięcia, zachowałoby się następująco:

Sprawdź ten długopis!

Domyślnie początek transformacji to „50% 50%”, czyli dokładnie w środku danego elementu. Zmiana początku na „lewy górny” (jak na powyższej demonstracji) powoduje, że element używa lewego górnego rogu elementu jako punktu obrotu.

Wartości mogą być długości, procenty lub słowa kluczowe top, left, right, bottom, i center.

Pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa, a trzecia wartość to pozycja na osi Z. Trzecia wartość będzie działać tylko wtedy, gdy używasz transformacji 3D i nie może to być wartość procentowa.

Zobacz ilustrację źródła transformacji pióra autorstwa Shaw (@shshaw) w witrynie CodePen.