Vlastnost CSS transform-origin
Příklad
Nastavte základní umístění otočeného prvku:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Definice a použití
Vlastnost transform-origin
umožňuje změnit polohu transformovaných prvků.
2D transformace mohou změnit osu x a y prvku. 3D transformace mohou také změnit osu z prvku.
Pro lepší pochopení transform-origin
nemovitosti si
prohlédněte ukázku .
Poznámka: Tato vlastnost musí být použita společně s vlastností transform .
Tip: Chcete-li lépe porozumět této vlastnosti pro 3D transformace , podívejte se na ukázku .
Výchozí hodnota: | 50 % 50 % 0 |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.transformOrigin="0 0" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
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- |
Syntaxe CSS
transform-origin: x-axis y-axis z-axis|initial|inherit;
Hodnoty vlastností
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 |
Související stránky
CSS tutoriál: CSS 2D transformace
CSS tutoriál: CSS 3D transformace
Odkaz HTML DOM: vlastnost transformOrigin