Przykład
Ustaw umieszczenie bazy obróconej elementu:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość przekształcić-origin umożliwia zmianę położenia przekształconych elementów.
transformacje 2D można zmienić X i Y oś elementu. transformacje 3D mogą również zmienić osi elementu.
Aby lepiej zrozumieć właściwości transform-origin, zobaczyć demo .
Note: Ta właściwość musi być używany razem z przekształcenia nieruchomości.
Tip: Aby lepiej zrozumieć tę właściwość dla 3D przekształca zobaczyć demo .
| Domyślna wartość: | 50% 50% 0 |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes. Read about animatable Try it |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.transformOrigin="0 0" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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
| Wartość nieruchomości | Opis |
|---|---|
| x-axis | Określa gdzie widok jest umieszczony na osi x. Możliwe wartości:
|
| y-axis | Określa gdzie widok jest umieszczony na osi y. Możliwe wartości:
|
| z-axis | Określa gdzie widok jest umieszczony na osi (for 3D transformations) . Możliwe wartości:
|
| inicjał | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej |
| dziedziczyć | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Podobne strony
Kurs CSS: CSS 2D Transformacje
Kurs CSS: CSS 3D Transformacje
HTML DOM referencyjny: transformOrigin property