CSS 2D-muunnokset
- Edellinen sivu CSS verkkotyyli
- Seuraava sivu CSS 3D-muunnokset
CSS 2D-muunnokset
CSS-muunnokset (transforms) mahdollistavat elementtien siirtämisen, kiertämisen, skaalaamisen ja vinouttamisen.
Kun hiiriä pidetään alla olevan elementin päällä, voidaan nähdä 2D-muunnokset:
Tässä luvussa opit seuraavat CSS-ominaisuudet:
transform
Selaimen tuki
Taulukossa olevat numerot viittaavat ensimmäiseen selaimeseen, joka tukee ominaisuutta täysin.
| Ominaisuus | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 2D-muunnosmenetelmä
Käyttämällä CSS transform Ominaisuudet, voit käyttää seuraavia 2D-muunnosmenetelmiä:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Vinkki:Seuraavassa luvussa opit 3D-muunnokset.
translate() -metodi
translate() Metodi siirtää elementtiä sen nykyisestä sijainnista (X- ja Y-akselin määrittämillä parametreillä).
Tässä esimerkissä <div>-elementti siirtyy oikealle 50 pixeliä ja alas 100 pixeliä sen nykyisestä sijainnista:
Esimerkki
div {
transform: translate(50px, 100px);
}
rotate() -metodi
rotate() Metodi kiertää elementtiä annetun kulman mukaan myötä- tai vastapäivään.
Tässä esimerkissä <div>-elementti kiertää myötäpäivään 20 astetta:
Esimerkki
div {
transform: rotate(20deg);
}
Negatiivisilla arvoilla voidaan kiertää elementti vastapäivään.
Tässä esimerkissä <div>-elementti kiertää vastapäivään 20 astetta:
Esimerkki
div {
transform: rotate(-20deg);
}
scale() -metodi
scale() Metodi lisää tai vähentää elementin kokoa (annettujen leveys- ja korkeusparametrien mukaan).
Tässä esimerkissä <div>-elementti laajennetaan alkuperäisen leveyden kaksinkertaiseksi ja korkeuden kolminkertaiseksi:
Esimerkki
div {
transform: scale(2, 3);
}
Tässä esimerkissä <div>-elementti pienennetään alkuperäisen leveyden ja korkeuden puoleen:
Esimerkki
div {
transform: scale(0.5, 0.5);
}
scaleX() -metodi
scaleX() Metodi lisää tai vähentää elementin leveyttä.
Tässä esimerkissä <div>-elementti laajennetaan alkuperäisen leveyden kaksinkertaiseksi:
Esimerkki
div {
transform: scaleX(2);
}
Tässä esimerkissä <div>-elementti supistetaan alkuperäisen leveyden puoleen.
Esimerkki
div {
transform: scaleX(0.5);
}
scaleY() menetelmä
scaleY() Menetelmä lisää tai vähentää elementin korkeutta.
Seuraava esimerkki suurennetaan <div>-elementtiä alkuperäisen korkeuden kolminkertaisesti:
Esimerkki
div {
transform: scaleY(3);
}
Seuraava esimerkki pienentää <div>-elementin alkuperäistä korkeutta puoliksi:
Esimerkki
div {
transform: scaleY(0.5);
}
skewX() menetelmä
skewX() Menetelmä vinouttaa elementtiä annetulla kulmalla X-akselin suuntaan.
Seuraava esimerkki vinouttaa <div>-elementtiä X-akselin suuntaan 20 asteen:
Esimerkki
div {
transform: skewX(20deg);
}
skewY() menetelmä
skewY() Menetelmä vinouttaa elementtiä annetulla kulmalla Y-akselin suuntaan.
Seuraava esimerkki vinouttaa <div>-elementtiä Y-akselin suuntaan 20 asteen:
Esimerkki
div {
transform: skewY(20deg);
}
skew() menetelmä
skew() Menetelmä vinouttaa elementtiä annetulla kulmalla X ja Y-akselin suuntaan.
Seuraava esimerkki tekee <div>-elementistä X-akselin suuntaan 20 asteen ja Y-akselin suuntaan 10 asteen vinoutuksen:
Esimerkki
div {
transform: skew(20deg, 10deg);
}
Jos toista parametria ei määritetä, arvo on nolla. Siksi seuraava esimerkki tekee <div>-elementistä X-akselin suuntaan 20 asteen vinoutuksen:
Esimerkki
div {
transform: skew(20deg);
}
matrix() menetelmä
matrix() Menetelmä yhdistää kaikki 2D-muunnosmenetelmät yhdeksi.
matrix() Menetelmä voi hyväksyä kuusi parametria, mukaan lukien matematiikkafunktiot, jotka mahdollistavat elementin pyörittämisen, skaalaamisen, siirtämisen (liikkumisen) ja vinottamisen.
Parametrit ovat seuraavat: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Esimerkki
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS-muunnosominaisuudet
Seuraavassa taulukossa luetellaan kaikki 2D-muunnosominaisuudet:
| Ominaisuus | Kuvaus |
|---|---|
| transform | Toteuta 2D tai 3D-muunnos elementtiin. |
| transform-origin | Mahdollistaa muunnoksen elementin sijainnin muuttamisen. |
CSS 2D-muunnosmenetelmä
| Funktio | Kuvaus |
|---|---|
| matrix(n,n,n,n,n,n) | Määritä 2D-muunnos kuuden arvon matriisin avulla. |
| translate(x,y) | Määritä 2D-muunnos, siirrä elementti X ja Y-akselin suuntaan. |
| translateX(n) | Määritä 2D-muunnos, siirrä elementti X-akselin suuntaan. |
| translateY(n) | Määritä 2D-muunnos, siirrä elementti Y-akselin suuntaan. |
| scale(x,y) | Määritä 2D-kooltamusmuunnos, muuttamalla elementin leveyttä ja korkeutta. |
| scaleX(n) | Määritä 2D-kooltamusmuunnos, muuttamalla elementin leveyttä. |
| scaleY(n) | Määritä 2D-kooltamusmuunnos, muuttamalla elementin korkeutta. |
| kierto(kulma) | Määritä 2D-kiertomuunnos, määrittämällä kulma parametereissa. |
| kallistus(x-kulma,y-kulma) | Määritä 2D-kallistusmuunnos X ja Y-akselin suuntaan. |
| kallistusX(kulma) | Määritä 2D-kallistusmuunnos X-akselin suuntaan. |
| kallistusY(kulma) | Määritä 2D-kallistusmuunnos Y-akselin suuntaan. |
- Edellinen sivu CSS verkkotyyli
- Seuraava sivu CSS 3D-muunnokset
