CSS 3D muunnokset

CSS 3D muunnokset

CSS tukee myös 3D-muunnoksia.

Vedä hiiren osoittaja alla olevaa elementtiä päällimmäiselle, niin voit nähdä eroja 2D- ja 3D-muunnosten välillä:

2D-kiertue
3D-kiertue

Tässä luvussa opit seuraavista CSS-ominaisuuksista:

  • transform

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka täysin tukee ominaisuutta.

Atribuutti Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D-muunnosmenetelmä

CSS:n kautta transform Ominaisuus, voit käyttää seuraavia 3D-muunnosmenetelmiä:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() -menetelmä

Pyöritä X

rotateX() Metodi, joka tekee elementistä pyörivän annetulla kulmalla X-akselin suuntaan:

Esimerkki

#myDiv {
  transform: rotateX(150deg);
}

Kokeile itse

rotateY() -menetelmä

Pyöritä Y

rotateY() Metodi, joka tekee elementistä pyörivän annetulla kulmalla Y-akselin suuntaan:

Esimerkki

#myDiv {
  transform: rotateY(130deg);
}

Kokeile itse

rotateZ() -menetelmä

rotateZ() Metodi, joka tekee elementistä pyörivän annetulla kulmalla Z-akselin suuntaan:

Esimerkki

#myDiv {
  transform: rotateZ(90deg);
}

Kokeile itse

CSS-muunnosominaisuudet

Seuraavassa taulukossa luetellaan kaikki 3D-muunnosominaisuudet:

Atribuutti Kuvaus
transform Soita elementille 2D- tai 3D-muunnos.
transform-origin Salli muunnoksen saavuttaman elementin sijainnin muuttaminen.
transform-style Määritä, miten sisäänrakennetut elementit näytetään 3D-tilassa.
perspective Määritä 3D-elementin perspektiiviefekti.
perspective-origin Määritä 3D-elementin pohjan sijainti.
backface-visibility Määritä, näkyykö elementti, kun se ei ole suunnattu näytölle.

CSS 3D-muunnosmenetelmä

Funktio Kuvaus
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Määritä 3D-muunnos käyttäen 16 arvon 4x4-matriisia.
translate3d(x,y,z) Määritä 3D-käännösmuunnos.
translateX(x) Määritä 3D-käännösmuunnos käyttäen vain X-akselin arvoja.
translateY(y) Määritä 3D-käännösmuunnos käyttäen vain Y-akselin arvoja.
translateZ(z) Määritä 3D-käännösmuunnos käyttäen vain Z-akselin arvoja.
scale3d(x,y,z) Määritä 3D-kasvutusmuunnos.
scaleX(x) Määritä 3D-kasvutusmuunnos annetulla X-akselin arvolla.
scaleY(y) Määritä 3D-kasvutusmuunnos annetulla Y-akselin arvolla.
scaleZ(z) Määritä 3D-kasvutusmuunnos annetulla Z-akselin arvolla.
rotate3d(x,y,z,angle) Määritellään 3D-kierto.
rotateX(angle) Määritellään X-akselin suuntaista 3D-kiertoa.
rotateY(angle) Määritellään Y-akselin suuntaista 3D-kiertoa.
rotateZ(angle) Määritellään Z-akselin suuntaista 3D-kiertoa.
perspective(n) Määritellään 3D-muunnoselementin perspektiivinäkymä.