Właściwość CSS transform-origin
Przykład
Ustaw podstawowe położenie obróconego elementu:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Definicja i użycie
Właściwość transform-origin
pozwala na zmianę położenia transformowanych elementów.
Transformacje 2D mogą zmienić oś x i y elementu. Transformacje 3D mogą również zmienić oś Z elementu.
Aby lepiej zrozumieć transform-origin
usługę,
obejrzyj demo .
Uwaga: Ta właściwość musi być używana razem z właściwością transform .
Wskazówka: aby lepiej zrozumieć tę właściwość dla przekształceń 3D , obejrzyj demonstrację .
Domyślna wartość: | 50% 50% 0 |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.transformOrigin="0 0" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
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 (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Składnia CSS
transform-origin: x-axis y-axis z-axis|initial|inherit;
Wartości nieruchomości
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Powiązane strony
Samouczek CSS: CSS 2D Transforms
Samouczek CSS: CSS 3D Transforms
Dokumentacja HTML DOM: właściwość transformOrigin