Kurssivinkki:

CSS perspective() funktio

Määrittely ja käyttö perspective() CSS

perspective() Funktio määrittää käyttäjän etäisyyden z=0-tasosta. transform ominaisuuksissa.

Esimerkki

Käytä perspective() Lisää molemmille kuution muodoille jonkin verran perspektiiviä:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Kokeile itse

CSS syntaksi

perspective(length|none)
Arvo Kuvaus
length Välttämätön. Määrittää käyttäjän etäisyys z=0-tasosta. none tarkoittaa, että muunnosta ei tehdä.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 2

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimen versioon, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Tiedostot

Oppitunti:CSS 3D muunnos

Viittaus:CSS transform ominaisuus

Viittaus:CSS rotate() funktio

Viittaus:CSS rotate3d() funktio

Viittaus:CSS rotateX() funktio

Viittaus:CSS rotateY() funktio

Viittaus:CSS rotateZ() funktio