Atrybut transform-origin w CSS

rekomendowane kursy:

definicja i użycie

Właściwość transform-origin pozwala zmieniać pozycję elementu przekształcanego.

Elementy przekształcanego 2D mogą zmieniać osie X i Y. Elementy przekształcanego 3D mogą również zmieniać swoją oś Z.Aby lepiej zrozumieć właściwość transform, zobacz tendemo

Aby lepiej zrozumieć właściwość transform-origin, zobacz tenAby lepiej zrozumieć właściwość transform, zobacz tendemo

Użytkownicy Safari/Chrome: Aby lepiej zrozumieć, jak właściwość transform-origin jest używana w przypadku przekształceń 3D, zobacz tenkomentarz: transform musi być używane razem z

właściwości używane razem.Aby lepiej zrozumieć właściwość transform, zobacz tendemo

.

patrz również:2D przekształcenia w CSS3

patrz również:3D przekształcenia w CSS3

CSS3 tutorial:HTML DOM podręcznik

właściwość transformOrigin

przykład

ustawienie punktu bazowego rotacyjnego elementu:
  div {
  transform: obracaj(45stopni);
transform-origin: 20% 40%;

}

spróbuj sam

w dolnej części strony znajdują się więcej przykładów.

syntaktyka CSS opis prawo %transform-origin:

;

wartość atrybutu wartość
opis

osi X

  • definiuje, gdzie umieszczona jest wizja na osi X. Możliwe wartości:
  • górna
  • lewo
  • definiuje, gdzie umieszczona jest wizja na osi Z. Możliwe wartości:
  • dolna
prawo

osi Y

  • definiuje, gdzie umieszczona jest wizja na osi Y. Możliwe wartości:
  • górna
  • środek
  • definiuje, gdzie umieszczona jest wizja na osi Z. Możliwe wartości:
  • dolna
%

osi Z

  • definiuje, gdzie umieszczona jest wizja na osi Z. Możliwe wartości:

length

szczegóły techniczne domyślna wartość:
50% 50% 0 dziedziczenie:
nie wersja:
CSS3 JavaScript syntax:obiekt

.style.transformOrigin="20% 40%"

Właściwości przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość, a liczby z przedrostkami -webkit-, -moz- lub -ms- oznaczają, że używana jest pierwsza wersja z przedrostkiem.

właściwość Chrome IE Firefox Safari Opera
transform-origin
(dwuwymiarowy język)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(trójwymiarowy język)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-