Elemendi nähtamatuks muutmine

Omadusega visibility saab määrata, kas objekt on nähtav või mitte.

Kasutada saab järgmiseid väärtuseid:

• visible – element on nähtav.
• hidden.—element on peidetud;
• collapse – kasutatakse tabelis, kus eemaldab rea või veeru kuid ei mõjuta tabeli struktuuri. Teiste elementide juures kasutades töötab nagu väärtus hidden!
• inherit – vastav väärtus päritakse objekti sisaldavalt elemendilt (parent);
• initial – seab selle omaduse esialgsele väärtusele.

Näiteks:

p.peidus {
 visibility: hidden;
}

NB! Peidetud element pole nähtav kuid võtab siiski ruumi!

Kui on tarvis element nii peita, et ta vabastaks ka ruumi, siis tuleb kasutada omadust display väärtusega none. 

Näiteks:

img.peidetud {
  display: none;
}

Elementide läbipaistvus

CSS võimaldab ka veebilehe elementide (<div>, <img> jms) läbipaistvust muuta, selleks kasutatakse omadust opacity, mille väärtus määratakse 0 (täiesti läbipaistev) kuni 1 (täiesti läbipaistmatu).

Näiteks:

img.labipaistev {
  opacity: 0.5;
}

NB! Murdarv kirjutatakse punktiga!

2D Transformatsioonid

Tegemist on ühe huvitavama CSS3 omadusega, mis suudab muuta veebilehe elementide kuju, suurust ja asendit.

Transformeerimiseks on omadus transform. Kasutada saab järgmiseid teisendusi:

• scale – suurus, väärtuseks kümnendmurrud, väärtus 1 tähistab elemendi originaalsuurust;

NB! Negatiivne väärtus pöörab elemendi peegelpilti nagu tavapäraselt flip teisendus arvutigraafikas.

• rotate – pöördenurk, väärtused vahemikus 0 – 360, väärtusele lisatakse mõõtühikuna deg (lühend nurgakraadist degree), kui lähtepunkti (origin) pole määratud, siis toimub pööre ümber keskpunkti;
• translate – nihe mingis suunas, väärtusteks näiteks pikslid horisontaal ja vertikaalsuunal;
• skew – rööpnihe;
• matrix – kombineerib kõik eelmised, transformeerib elemendi 6 etteantud väärtuse järgi.

Süntaks on järgmine:

transform: scale(x) rotate([x]deg) translate(Xpx, Xpx) skew([x]deg, [y]deg);

NB! Määrata võib ühe või mitu erinevat teisendust, eraldajaks on tühik! Seejuures ei pea järjekord vastama eelpool toodule ning tulemus sõltub teisenduste järjekorrast.

Huvitav on see, et transform rakendamisel ei mõjutata ülejäänud veebilehe elemente, ehk transformeeritud element hõivab endiselt oma originaalse suuruse ja asukohaga ala.

Lisaks saab määrata teisenduse lähtekoha, ehk siis punkti, mille suhtes transformatsioon toimub, selleks on omadus transform-origin, millel määratakse kaks tühikuga eraldatud väärtust – lähtekoht x-teljel ja lähtekoht y-teljel.

• X-telje jaoks on kasutada järgmised võimalikud väärtused:
  • left – lähtekohaks horisontaalselt vasak serv;
  • center – lähtekohaks horisontaalselt keskkoht;
  • right – lähtekohaks horisontaalselt parem serv;
  • arvväärtus pikslites alustades vasakust servast;
  • protsendid elemendi laiuse suhtes (alustatakse vasakult).
• Y-telje jaoks on kasutada järgmised võimalikud väärtused:
  • top – lähtekohaks vertikaalselt ülemine serv;
  • center – lähtekohaks vertikaalselt keskkoht;
  • bottom – lähtekohaks vertikaalselt alumine serv;
  • arvväärtus pikslites alustades ülaservast;
  • protsendid elemendi kõrguse suhtes (alustatakse ülevalt).

NB! Mõlema telje suhtes on vaikeväärtusena 50%!

Näiteks:

div { 
  transform-origin: 50% 50%; 
  transfom: scale(.5) rotate(45deg) skew(30deg 0deg); 
}

3D transformatsioonid

Sarnaselt 2D transformatsioonidele on olemas ka 3D transformatsioonid. 3D puhul on lisaks teisendustele vaja kasutada ka omadusi, mis määravad, kuidas me objekte ruumis näeme.

3D teisendused

Pakutavad teisendused on:

• scaleX – suurus X-telje suunal, väärtuseks kümnendmurrud, väärtus 1 tähistabelemendi originaalsuurust;
• scaleY – suurus Y-telje suunal, väärtuseks kümnendmurrud, väärtus 1 tähistab elemendi originaalsuurust;
• scaleZ – suurus Z-telje suunal, väärtuseks kümnendmurrud, väärtus 1 tähistab elemendi originaalsuurust;

NB! Sarnaselt 2D transformatsioonidele on ka siin negatiivne väärtus peegeldus (flip).

• rotateX – pööre ümber X-telje;
• rotateY – pööre ümber Y-telje;
• rotateZ – pööre ümber Z-telje, põhimõtteliselt sama, mis 2D transformatsioonide rotate.

Sarnaselt 2D transformatsioonidele on pööramise puhul väärtused vahemikus 0 – 360, väärtusele lisatakse mõõtühikuna deg (lühend nurgakraadist degree). Kui lähtepunkti (origin) pole määratud, siis toimub pööre ümber keskpunkti.

• translateX – nihe X-telje suunal;
• translateY – nihe Y-telje suunal;
• translateZ – nihe Z-telje suunal (väärtused kasvavad vaataja suunas);
• skewX – rööpnihe X-telje suunal;
• skewY – rööpnihe Y-telje suunal;
• skewZ – rööpnihe Z-telje suunal;

Kõiki eespool loetletud transformatsioone kombineerib väärtus:

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – defineerib 3D transformatsiooni 4X4 maatriksi abil.

Täpselt samuti nagu 2D transformatsioonide puhul, saab määrata punkti, mille suhtes teisendused toimuvad. Kasutada on sama omadus transform-origin, millel antud juhul määratakse kolm tühikuga eraldatud väärtust – lähtekoht x-teljel, lähtekoht y-teljel ja lähtekoht z-teljel.

• X-telje jaoks on kasutada järgmised võimalikud väärtused:
  • left – lähtekohaks horisontaalselt vasak serv;
  • center – lähtekohaks horisontaalselt keskkoht;
  • right – lähtekohaks horisontaalselt parem serv;
  • arvväärtus pikslites alustades vasakust servast;
  • protsendid elemendi laiuse suhtes (alustatakse vasakult).
• Y-telje jaoks on kasutada järgmised võimalikud väärtused:
  • top – lähtekohaks vertikaalselt ülemine serv;
  • center – lähtekohaks vertikaalselt keskkoht;
  • bottom – lähtekohaks vertikaalselt alumine serv;
  • arvväärtus pikslites alustades ülaservast;
  • protsendid elemendi kõrguse suhtes (alustatakse ülevalt).
• Z-telje jaoks on kasutada vaid üks variant väärtuseid:
  • arvväärtus pikslites, eemaldudes väärtused kahanevad;

NB! Vaikeväärtusteks on 50% 50% 0!

Näiteks:

div {
  transform-origin: 50% 50% 150px;
  transfom: rotateY(45deg);
}

3D vaate omadused

Tulenevalt ruumiliste teisenduste iseärasustest on nende puhul kasutada ka omadused, mis määravad, kuidas me elemente ruumis näeme.

Ruumilise asendi näitamine

3D teisenduste puhul on võimalik määrata, kas mingi kindla elemendi tütarelemendid hoiavad oma asendit 3D ruumis või mittes.

Selleks on omadus transform-style, millel on järgmised võimalikud väärtused:

• flat – elemendi tütarelemendid ei hoia oma 3D asendit;
• preserve-3d – elemendi tütarelemendid hoiavad oma 3D asendit.

Näiteks:

div {
  transform-style: preserve-3d;
  transfom: rotateY(45deg);
}

Perspektiiv

3D teisenduste puhul saab määrata ka perspektiivi ehk kaugust vaatajast. Selleks kasutatakse omadust perspective, millel on kasutada järgmised väärtused:

• arvväärtus pikslites;
• none – samaväärne arvuga 0, perspektiiv on määramata, see on ka vaikeväärtus.

Näiteks:

div {
  transform-style: preserve-3d;
  perspective 500px;
}

Vaatepunkt

Määrata saab ka punkti, mille suhtes elemente vaadatakse. Selleks on omadus perspective-origin, millele tuleb määrata tühikutega eraldatud väärtused x-telje ja y-telje suhtes.

• X-telje jaoks on kasutada järgmised võimalikud väärtused:
  • left – vaatekoht horisontaalselt vasak serv;
  • center – vaatekohaks horisontaalselt keskkoht;
  • right – vaatekohaks horisontaalselt parem serv;
  • arvväärtus pikslites alustades vasakust servast;
  • protsendid elemendi laiuse suhtes (alustatakse vasakult).
• Y-telje jaoks on kasutada järgmised võimalikud väärtused:
  • top – vaatekohaks vertikaalselt ülemine serv;
  • center – vaatekohaks vertikaalselt keskkoht;
  • bottom – vaatekohaks vertikaalselt alumine serv;
  • arvväärtus pikslites alustades ülaservast;
  • protsendid elemendi kõrguse suhtes (alustatakse ülevalt)

NB! Mõlema telje suhtes on vaikeväärtusena 50%!

Elemendi nähtavus tagantpoolt vaadates

Määrata saab ka seda, kas elemendid paistavad ka tagantpoolt vaadatuna (kui neid ruumis pöörata). Omadusel backface-visibility on järgmised väärtused:

• visible – element on nähtavad ka tagantpoolt, vaikeväärtus;
• hidden – element pole tagantpoolt nähtav.

Näiteks:

div img {
  backface-visibility: hidden;
}