Spis alfabetyczny stylów CSS.
Właściwość transform-origin umożliwia zmianę położenia przekształconych elementów.
Transformacje 2D mogą zmienić oś X i Y elementu. Transformacje 3D mogą również zmienić oś Z elementu.
Uwaga: Ta właściwość musi być używana razem z właściwością transform.
Uwaga: Internet Explorer 9 i wcześniejsze wersje nie obsługują przekształceń 3D.
Aby lepiej zrozumieć właściwość pochodzenia transformacji, obejrzyj prezentację.
Obróć bordowy element div, spróbuj zmienić jego oś X, Y i Z:
Obracaj:
-webkit-transform: rotateY:(70deg);
X-axis:
Y-axis:
Z-axis:
-webkit-transform-origin: 50% 50% 100px;
Wartość | Opis |
x-axis | Definiuje, gdzie widok jest umieszczony na osi X. Możliwe wartości: left center right length % |
y-axis | Definiuje, gdzie widok jest umieszczony na osi y. Możliwe wartości: top center bottom length % |
z-axis | Definiuje, gdzie widok jest umieszczony na osi z (dla przekształceń 3D). Możliwe wartości: length w px | mm | cm | in | pt | pc | em | ex. |
initial | Ustawia tę właściwość na jej wartość domyślną. |
inherit | Dziedziczy tę właściwość z elementu nadrzędnego. |
transform-origin: property duration timing-function delay | initial | inherit;
Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.
Liczba przed -webkit-, -moz- i -o- określa pierwszą wersję, która działała z prefiksem.
Właściwość | |||||
transform-origin (składnia dwuwartościowa) |
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 (składnia trójwartościowa) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit |
23.0 15.0 -webkit- |
Właściwość transform-origin umożliwia zmianę położenia przekształconych elementów.
Transformacje 2D mogą zmienić oś X i Y elementu. Transformacje 3D mogą również zmienić oś Z elementu.
Uwaga: Ta właściwość musi być używana razem z właściwością transform.
Uwaga: Internet Explorer 9 i wcześniejsze wersje nie obsługują przekształceń 3D.
Aby lepiej zrozumieć właściwość pochodzenia transformacji, obejrzyj prezentację.
Obróć bordowy element div, spróbuj zmienić jego oś X, Y i Z:
Obracaj:
-webkit-transform: rotateY:(70deg);
X-axis:
Y-axis:
Z-axis:
-webkit-transform-origin: 50% 50% 100px;
Wartość | Opis |
x-axis | Definiuje, gdzie widok jest umieszczony na osi X. Możliwe wartości: left center right length % |
y-axis | Definiuje, gdzie widok jest umieszczony na osi y. Możliwe wartości: top center bottom length % |
z-axis | Definiuje, gdzie widok jest umieszczony na osi z (dla przekształceń 3D). Możliwe wartości: length w px | mm | cm | in | pt | pc | em | ex. |
initial | Ustawia tę właściwość na jej wartość domyślną. |
inherit | Dziedziczy tę właściwość z elementu nadrzędnego. |
transform-origin: property duration timing-function delay | initial | inherit;
Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.
Liczba przed -webkit-, -moz- i -o- określa pierwszą wersję, która działała z prefiksem.
Właściwość | |||||
transform-origin (składnia dwuwartościowa) |
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 (składnia trójwartościowa) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit |
23.0 15.0 -webkit- |
Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.
Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.
Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności
Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00