Vlastnost perspektivy CSS
Příklad
Dejte 3D umístěnému prvku určitou perspektivu:
#div1
{
perspective: 100px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato perspective
vlastnost se používá k tomu, aby 3D umístěný prvek získal určitou perspektivu.
Vlastnost perspective
definuje, jak daleko je objekt od uživatele. Takže nižší hodnota bude mít za následek intenzivnější 3D efekt než vyšší hodnota.
Při definování perspective
vlastnosti pro prvek získají perspektivní pohled prvky CHILD, NE prvek samotný.
Tip: Podívejte se také na vlastnost perspective-origin , která definuje, na jaké pozici se uživatel dívá na 3D objekt.
Chcete-li lépe porozumět vlastnosti perspektivy, podívejte se na ukázku .
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.perspective="50px" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- nebo -moz- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Syntaxe CSS
perspective: length|none;
Hodnoty vlastností
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Vytvořte krychli a nastavte různé perspektivy:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Související stránky
CSS tutoriál: CSS 3D transformace
HTML DOM reference: vlastnost perspective