{"id":500,"date":"2020-03-11T17:38:30","date_gmt":"2020-03-11T17:38:30","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=500"},"modified":"2020-03-11T17:38:30","modified_gmt":"2020-03-11T17:38:30","slug":"elemendi-peitmine-ja-transformeerimine","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/elemendi-peitmine-ja-transformeerimine\/","title":{"rendered":"Elemendi peitmine ja transformeerimine"},"content":{"raw":"<h1>Elemendi n\u00e4htamatuks muutmine<\/h1>\r\nOmadusega <em>visibility<\/em> saab m\u00e4\u00e4rata, kas objekt on n\u00e4htav v\u00f5i mitte.\r\n\r\nKasutada saab j\u00e4rgmiseid v\u00e4\u00e4rtuseid:\r\n<ul>\r\n \t<li><em>visible<\/em> \u2013 element on n\u00e4htav.<\/li>\r\n \t<li><em>hidden<\/em>.\u2014element on peidetud;<\/li>\r\n \t<li><em>collapse<\/em> \u2013 kasutatakse tabelis, kus eemaldab rea v\u00f5i veeru kuid ei m\u00f5juta tabeli struktuuri. Teiste elementide juures kasutades t\u00f6\u00f6tab nagu v\u00e4\u00e4rtus <em>hidden<\/em>!<\/li>\r\n \t<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">p.peidus {\r\n visibility: hidden;\r\n}<\/pre>\r\n<span class=\"nb\">NB! Peidetud element pole n\u00e4htav kuid v\u00f5tab siiski ruumi!<\/span>\r\n\r\n<span style=\"text-align: initial; font-size: 1em;\">Kui on tarvis element nii peita, et ta vabastaks ka ruumi, siis tuleb kasutada omadust <em>display<\/em> v\u00e4\u00e4rtusega <em>none.<\/em>\u00a0<\/span>\r\n\r\n<span style=\"text-align: initial; font-size: 1em;\">N\u00e4iteks:<\/span>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img.peidetud {\r\n  display: none;\r\n}<\/pre>\r\n<h1>Elementide l\u00e4bipaistvus<\/h1>\r\nCSS v\u00f5imaldab ka veebilehe elementide (<code>&lt;div&gt;<\/code>, <code>&lt;img&gt;<\/code> jms) l\u00e4bipaistvust muuta, selleks kasutatakse omadust <em>opacity<\/em>, mille v\u00e4\u00e4rtus m\u00e4\u00e4ratakse 0 (t\u00e4iesti l\u00e4bipaistev) kuni 1 (t\u00e4iesti l\u00e4bipaistmatu).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img.labipaistev {\r\n  opacity: 0.5;\r\n}<\/pre>\r\n<span class=\"nb\">NB! Murdarv kirjutatakse punktiga!<\/span>\r\n<h1>2D Transformatsioonid<\/h1>\r\nTegemist on \u00fche huvitavama CSS3 omadusega, mis suudab muuta veebilehe elementide kuju, suurust ja asendit.\r\n\r\nTransformeerimiseks on omadus <em>transform<\/em>. Kasutada saab j\u00e4rgmiseid teisendusi:\r\n<ul>\r\n \t<li><em>scale<\/em> \u2013 suurus, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\r\n<\/ul>\r\nNB! Negatiivne v\u00e4\u00e4rtus p\u00f6\u00f6rab elemendi peegelpilti nagu tavap\u00e4raselt <em>flip<\/em> teisendus arvutigraafikas.\r\n<ul>\r\n \t<li><em>rotate<\/em> \u2013 p\u00f6\u00f6rdenurk, v\u00e4\u00e4rtused vahemikus 0 \u2013 360, v\u00e4\u00e4rtusele lisatakse m\u00f5\u00f5t\u00fchikuna <em>deg<\/em> (l\u00fchend nurgakraadist <em>degree<\/em>), kui l\u00e4htepunkti (<em>origin<\/em>) pole m\u00e4\u00e4ratud, siis toimub p\u00f6\u00f6re \u00fcmber keskpunkti;<\/li>\r\n \t<li><em>translate<\/em> \u2013 nihe mingis suunas, v\u00e4\u00e4rtusteks n\u00e4iteks pikslid horisontaal ja vertikaalsuunal;<\/li>\r\n \t<li><em>skew<\/em> \u2013 r\u00f6\u00f6pnihe;<\/li>\r\n \t<li><em>matrix<\/em> \u2013 kombineerib k\u00f5ik eelmised, transformeerib elemendi 6 etteantud v\u00e4\u00e4rtuse j\u00e4rgi.<\/li>\r\n<\/ul>\r\nS\u00fcntaks on j\u00e4rgmine:\r\n<p style=\"padding-left: 40px;\"><em>transform: scale(x) rotate([x]deg) translate(Xpx, Xpx) skew([x]deg, [y]deg); <\/em><\/p>\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nNB! M\u00e4\u00e4rata v\u00f5ib \u00fche v\u00f5i mitu erinevat teisendust, eraldajaks on t\u00fchik! Seejuures ei pea j\u00e4rjekord vastama eelpool toodule ning tulemus s\u00f5ltub teisenduste j\u00e4rjekorrast.\r\n\r\nHuvitav on see, et transform rakendamisel ei m\u00f5jutata \u00fclej\u00e4\u00e4nud veebilehe elemente, ehk transformeeritud element h\u00f5ivab endiselt oma originaalse suuruse ja asukohaga ala.\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nLisaks saab m\u00e4\u00e4rata teisenduse l\u00e4htekoha, ehk siis punkti, mille suhtes transformatsioon toimub, selleks on omadus <em>transform-origin<\/em>, millel m\u00e4\u00e4ratakse kaks t\u00fchikuga eraldatud v\u00e4\u00e4rtust \u2013 l\u00e4htekoht x-teljel ja l\u00e4htekoht y-teljel.\r\n<ul>\r\n \t<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>left<\/em> \u2013 l\u00e4htekohaks horisontaalselt vasak serv;<\/li>\r\n \t<li><em>center<\/em> \u2013 l\u00e4htekohaks horisontaalselt keskkoht;<\/li>\r\n \t<li><em>right<\/em> \u2013 l\u00e4htekohaks horisontaalselt parem serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\r\n \t<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>top<\/em> \u2013 l\u00e4htekohaks vertikaalselt \u00fclemine serv;<\/li>\r\n \t<li><em>center<\/em> \u2013 l\u00e4htekohaks vertikaalselt keskkoht;<\/li>\r\n \t<li><em>bottom<\/em> \u2013 l\u00e4htekohaks vertikaalselt alumine serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\r\n \t<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt).<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! M\u00f5lema telje suhtes on vaikev\u00e4\u00e4rtusena 50%!<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div { \r\n  transform-origin: 50% 50%; \r\n  transfom: scale(.5) rotate(45deg) skew(30deg 0deg); \r\n}<\/pre>\r\n<h1>3D transformatsioonid<\/h1>\r\nSarnaselt 2D transformatsioonidele on olemas ka 3D transformatsioonid. 3D puhul on lisaks teisendustele vaja kasutada ka omadusi, mis m\u00e4\u00e4ravad, kuidas me objekte ruumis n\u00e4eme.\r\n<h2>3D teisendused<\/h2>\r\nPakutavad teisendused on:\r\n<ul>\r\n \t<li><em>scaleX<\/em> \u2013 suurus X-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histabelemendi originaalsuurust;<\/li>\r\n \t<li><em>scaleY<\/em> \u2013 suurus Y-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\r\n \t<li><em>scaleZ<\/em> \u2013 suurus Z-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\r\n<\/ul>\r\nNB! Sarnaselt 2D transformatsioonidele on ka siin negatiivne v\u00e4\u00e4rtus peegeldus (<em>flip<\/em>).\r\n<ul>\r\n \t<li><em>rotateX<\/em> \u2013 p\u00f6\u00f6re \u00fcmber X-telje;<\/li>\r\n \t<li><em>rotateY<\/em> \u2013 p\u00f6\u00f6re \u00fcmber Y-telje;<\/li>\r\n \t<li><em>rotateZ<\/em> \u2013 p\u00f6\u00f6re \u00fcmber Z-telje, p\u00f5him\u00f5tteliselt sama, mis 2D transformatsioonide <em>rotate<\/em>.<\/li>\r\n<\/ul>\r\nSarnaselt 2D transformatsioonidele on p\u00f6\u00f6ramise puhul v\u00e4\u00e4rtused vahemikus 0 \u2013 360, v\u00e4\u00e4rtusele lisatakse m\u00f5\u00f5t\u00fchikuna <em>deg<\/em> (l\u00fchend nurgakraadist <em>degree<\/em>). Kui l\u00e4htepunkti (<em>origin<\/em>) pole m\u00e4\u00e4ratud, siis toimub p\u00f6\u00f6re \u00fcmber keskpunkti.\r\n<ul>\r\n \t<li><em>translateX<\/em> \u2013 nihe X-telje suunal;<\/li>\r\n \t<li><em>translateY<\/em> \u2013 nihe Y-telje suunal;<\/li>\r\n \t<li><em>translateZ<\/em> \u2013 nihe Z-telje suunal (v\u00e4\u00e4rtused kasvavad vaataja suunas);<\/li>\r\n \t<li><em>skewX<\/em> \u2013 r\u00f6\u00f6pnihe X-telje suunal;<\/li>\r\n \t<li><em>skewY<\/em> \u2013 r\u00f6\u00f6pnihe Y-telje suunal;<\/li>\r\n \t<li><em>skewZ<\/em> \u2013 r\u00f6\u00f6pnihe Z-telje suunal;<\/li>\r\n<\/ul>\r\nK\u00f5iki eespool loetletud transformatsioone kombineerib v\u00e4\u00e4rtus:\r\n<ul>\r\n \t<li><em>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)<\/em> \u2013 defineerib 3D transformatsiooni 4X4 maatriksi abil.<\/li>\r\n<\/ul>\r\nT\u00e4pselt samuti nagu 2D transformatsioonide puhul, saab m\u00e4\u00e4rata punkti, mille suhtes teisendused toimuvad. Kasutada on sama omadus <em>transform-origin<\/em>, millel antud juhul m\u00e4\u00e4ratakse kolm t\u00fchikuga eraldatud v\u00e4\u00e4rtust \u2013 l\u00e4htekoht x-teljel, l\u00e4htekoht y-teljel ja l\u00e4htekoht z-teljel.\r\n<ul>\r\n \t<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>left<\/em> \u2013 l\u00e4htekohaks horisontaalselt vasak serv;<\/li>\r\n \t<li><em>center<\/em> \u2013 l\u00e4htekohaks horisontaalselt keskkoht;<\/li>\r\n \t<li><em>right<\/em> \u2013 l\u00e4htekohaks horisontaalselt parem serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\r\n \t<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>top<\/em> \u2013 l\u00e4htekohaks vertikaalselt \u00fclemine serv;<\/li>\r\n \t<li><em>center<\/em> \u2013 l\u00e4htekohaks vertikaalselt keskkoht;<\/li>\r\n \t<li><em>bottom<\/em> \u2013 l\u00e4htekohaks vertikaalselt alumine serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\r\n \t<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt).<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Z-telje jaoks on kasutada vaid \u00fcks variant v\u00e4\u00e4rtuseid:\r\n<ul>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites, eemaldudes v\u00e4\u00e4rtused kahanevad;<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! Vaikev\u00e4\u00e4rtusteks on 50% 50% 0!<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-origin: 50% 50% 150px;\r\n  transfom: rotateY(45deg);\r\n}<\/pre>\r\n<h2>3D vaate omadused<\/h2>\r\nTulenevalt ruumiliste teisenduste ise\u00e4rasustest on nende puhul kasutada ka omadused, mis m\u00e4\u00e4ravad, kuidas me elemente ruumis n\u00e4eme.\r\n<h3>Ruumilise asendi n\u00e4itamine<\/h3>\r\n3D teisenduste puhul on v\u00f5imalik m\u00e4\u00e4rata, kas mingi kindla elemendi t\u00fctarelemendid hoiavad oma asendit 3D ruumis v\u00f5i mittes.\r\n\r\nSelleks on omadus <em>transform-style<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>flat<\/em> \u2013 elemendi t\u00fctarelemendid ei hoia oma 3D asendit;<\/li>\r\n \t<li><em>preserve-3d<\/em> \u2013 elemendi t\u00fctarelemendid hoiavad oma 3D asendit.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-style: preserve-3d;\r\n  transfom: rotateY(45deg);\r\n}<\/pre>\r\n<h3>Perspektiiv<\/h3>\r\n3D teisenduste puhul saab m\u00e4\u00e4rata ka perspektiivi ehk kaugust vaatajast. Selleks kasutatakse omadust <em>perspective<\/em>, millel on kasutada j\u00e4rgmised v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites;<\/li>\r\n \t<li>none \u2013 samav\u00e4\u00e4rne arvuga 0, perspektiiv on m\u00e4\u00e4ramata, see on ka vaikev\u00e4\u00e4rtus.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-style: preserve-3d;\r\n  perspective 500px;\r\n}<\/pre>\r\nVaatepunkt\r\n\r\nM\u00e4\u00e4rata saab ka punkti, mille suhtes elemente vaadatakse. Selleks on omadus <em>perspective-origin<\/em>, millele tuleb m\u00e4\u00e4rata t\u00fchikutega eraldatud v\u00e4\u00e4rtused x-telje ja y-telje suhtes.\r\n<ul>\r\n \t<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>left \u2013 vaatekoht horisontaalselt vasak serv;<\/li>\r\n \t<li>center \u2013 vaatekohaks horisontaalselt keskkoht;<\/li>\r\n \t<li>right \u2013 vaatekohaks horisontaalselt parem serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\r\n \t<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>top \u2013 vaatekohaks vertikaalselt \u00fclemine serv;<\/li>\r\n \t<li>center \u2013 vaatekohaks vertikaalselt keskkoht;<\/li>\r\n \t<li>bottom \u2013 vaatekohaks vertikaalselt alumine serv;<\/li>\r\n \t<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\r\n \t<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt)<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! M\u00f5lema telje suhtes on vaikev\u00e4\u00e4rtusena 50%!<\/span>\r\n<h3>Elemendi n\u00e4htavus tagantpoolt vaadates<\/h3>\r\nM\u00e4\u00e4rata saab ka seda, kas elemendid paistavad ka tagantpoolt vaadatuna (kui neid ruumis p\u00f6\u00f6rata). Omadusel <em>backface-visibility<\/em> on j\u00e4rgmised v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>visible \u2013 element on n\u00e4htavad ka tagantpoolt, vaikev\u00e4\u00e4rtus;<\/li>\r\n \t<li>hidden \u2013 element pole tagantpoolt n\u00e4htav.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div img {\r\n  backface-visibility: hidden;\r\n}<\/pre>\r\n&nbsp;","rendered":"<h1>Elemendi n\u00e4htamatuks muutmine<\/h1>\n<p>Omadusega <em>visibility<\/em> saab m\u00e4\u00e4rata, kas objekt on n\u00e4htav v\u00f5i mitte.<\/p>\n<p>Kasutada saab j\u00e4rgmiseid v\u00e4\u00e4rtuseid:<\/p>\n<ul>\n<li><em>visible<\/em> \u2013 element on n\u00e4htav.<\/li>\n<li><em>hidden<\/em>.\u2014element on peidetud;<\/li>\n<li><em>collapse<\/em> \u2013 kasutatakse tabelis, kus eemaldab rea v\u00f5i veeru kuid ei m\u00f5juta tabeli struktuuri. Teiste elementide juures kasutades t\u00f6\u00f6tab nagu v\u00e4\u00e4rtus <em>hidden<\/em>!<\/li>\n<li><em>inherit<\/em> \u2013 vastav v\u00e4\u00e4rtus p\u00e4ritakse objekti sisaldavalt elemendilt (<em>parent<\/em>);<\/li>\n<li><em>initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">p.peidus {\r\n visibility: hidden;\r\n}<\/pre>\n<p><span class=\"nb\">NB! Peidetud element pole n\u00e4htav kuid v\u00f5tab siiski ruumi!<\/span><\/p>\n<p><span style=\"text-align: initial; font-size: 1em;\">Kui on tarvis element nii peita, et ta vabastaks ka ruumi, siis tuleb kasutada omadust <em>display<\/em> v\u00e4\u00e4rtusega <em>none.<\/em>\u00a0<\/span><\/p>\n<p><span style=\"text-align: initial; font-size: 1em;\">N\u00e4iteks:<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img.peidetud {\r\n  display: none;\r\n}<\/pre>\n<h1>Elementide l\u00e4bipaistvus<\/h1>\n<p>CSS v\u00f5imaldab ka veebilehe elementide (<code>&lt;div&gt;<\/code>, <code>&lt;img&gt;<\/code> jms) l\u00e4bipaistvust muuta, selleks kasutatakse omadust <em>opacity<\/em>, mille v\u00e4\u00e4rtus m\u00e4\u00e4ratakse 0 (t\u00e4iesti l\u00e4bipaistev) kuni 1 (t\u00e4iesti l\u00e4bipaistmatu).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img.labipaistev {\r\n  opacity: 0.5;\r\n}<\/pre>\n<p><span class=\"nb\">NB! Murdarv kirjutatakse punktiga!<\/span><\/p>\n<h1>2D Transformatsioonid<\/h1>\n<p>Tegemist on \u00fche huvitavama CSS3 omadusega, mis suudab muuta veebilehe elementide kuju, suurust ja asendit.<\/p>\n<p>Transformeerimiseks on omadus <em>transform<\/em>. Kasutada saab j\u00e4rgmiseid teisendusi:<\/p>\n<ul>\n<li><em>scale<\/em> \u2013 suurus, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\n<\/ul>\n<p>NB! Negatiivne v\u00e4\u00e4rtus p\u00f6\u00f6rab elemendi peegelpilti nagu tavap\u00e4raselt <em>flip<\/em> teisendus arvutigraafikas.<\/p>\n<ul>\n<li><em>rotate<\/em> \u2013 p\u00f6\u00f6rdenurk, v\u00e4\u00e4rtused vahemikus 0 \u2013 360, v\u00e4\u00e4rtusele lisatakse m\u00f5\u00f5t\u00fchikuna <em>deg<\/em> (l\u00fchend nurgakraadist <em>degree<\/em>), kui l\u00e4htepunkti (<em>origin<\/em>) pole m\u00e4\u00e4ratud, siis toimub p\u00f6\u00f6re \u00fcmber keskpunkti;<\/li>\n<li><em>translate<\/em> \u2013 nihe mingis suunas, v\u00e4\u00e4rtusteks n\u00e4iteks pikslid horisontaal ja vertikaalsuunal;<\/li>\n<li><em>skew<\/em> \u2013 r\u00f6\u00f6pnihe;<\/li>\n<li><em>matrix<\/em> \u2013 kombineerib k\u00f5ik eelmised, transformeerib elemendi 6 etteantud v\u00e4\u00e4rtuse j\u00e4rgi.<\/li>\n<\/ul>\n<p>S\u00fcntaks on j\u00e4rgmine:<\/p>\n<p style=\"padding-left: 40px;\"><em>transform: scale(x) rotate([x]deg) translate(Xpx, Xpx) skew([x]deg, [y]deg); <\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>NB! M\u00e4\u00e4rata v\u00f5ib \u00fche v\u00f5i mitu erinevat teisendust, eraldajaks on t\u00fchik! Seejuures ei pea j\u00e4rjekord vastama eelpool toodule ning tulemus s\u00f5ltub teisenduste j\u00e4rjekorrast.<\/p>\n<p>Huvitav on see, et transform rakendamisel ei m\u00f5jutata \u00fclej\u00e4\u00e4nud veebilehe elemente, ehk transformeeritud element h\u00f5ivab endiselt oma originaalse suuruse ja asukohaga ala.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Lisaks saab m\u00e4\u00e4rata teisenduse l\u00e4htekoha, ehk siis punkti, mille suhtes transformatsioon toimub, selleks on omadus <em>transform-origin<\/em>, millel m\u00e4\u00e4ratakse kaks t\u00fchikuga eraldatud v\u00e4\u00e4rtust \u2013 l\u00e4htekoht x-teljel ja l\u00e4htekoht y-teljel.<\/p>\n<ul>\n<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li><em>left<\/em> \u2013 l\u00e4htekohaks horisontaalselt vasak serv;<\/li>\n<li><em>center<\/em> \u2013 l\u00e4htekohaks horisontaalselt keskkoht;<\/li>\n<li><em>right<\/em> \u2013 l\u00e4htekohaks horisontaalselt parem serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\n<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\n<\/ul>\n<\/li>\n<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li><em>top<\/em> \u2013 l\u00e4htekohaks vertikaalselt \u00fclemine serv;<\/li>\n<li><em>center<\/em> \u2013 l\u00e4htekohaks vertikaalselt keskkoht;<\/li>\n<li><em>bottom<\/em> \u2013 l\u00e4htekohaks vertikaalselt alumine serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\n<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! M\u00f5lema telje suhtes on vaikev\u00e4\u00e4rtusena 50%!<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div { \r\n  transform-origin: 50% 50%; \r\n  transfom: scale(.5) rotate(45deg) skew(30deg 0deg); \r\n}<\/pre>\n<h1>3D transformatsioonid<\/h1>\n<p>Sarnaselt 2D transformatsioonidele on olemas ka 3D transformatsioonid. 3D puhul on lisaks teisendustele vaja kasutada ka omadusi, mis m\u00e4\u00e4ravad, kuidas me objekte ruumis n\u00e4eme.<\/p>\n<h2>3D teisendused<\/h2>\n<p>Pakutavad teisendused on:<\/p>\n<ul>\n<li><em>scaleX<\/em> \u2013 suurus X-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histabelemendi originaalsuurust;<\/li>\n<li><em>scaleY<\/em> \u2013 suurus Y-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\n<li><em>scaleZ<\/em> \u2013 suurus Z-telje suunal, v\u00e4\u00e4rtuseks k\u00fcmnendmurrud, v\u00e4\u00e4rtus 1 t\u00e4histab elemendi originaalsuurust;<\/li>\n<\/ul>\n<p>NB! Sarnaselt 2D transformatsioonidele on ka siin negatiivne v\u00e4\u00e4rtus peegeldus (<em>flip<\/em>).<\/p>\n<ul>\n<li><em>rotateX<\/em> \u2013 p\u00f6\u00f6re \u00fcmber X-telje;<\/li>\n<li><em>rotateY<\/em> \u2013 p\u00f6\u00f6re \u00fcmber Y-telje;<\/li>\n<li><em>rotateZ<\/em> \u2013 p\u00f6\u00f6re \u00fcmber Z-telje, p\u00f5him\u00f5tteliselt sama, mis 2D transformatsioonide <em>rotate<\/em>.<\/li>\n<\/ul>\n<p>Sarnaselt 2D transformatsioonidele on p\u00f6\u00f6ramise puhul v\u00e4\u00e4rtused vahemikus 0 \u2013 360, v\u00e4\u00e4rtusele lisatakse m\u00f5\u00f5t\u00fchikuna <em>deg<\/em> (l\u00fchend nurgakraadist <em>degree<\/em>). Kui l\u00e4htepunkti (<em>origin<\/em>) pole m\u00e4\u00e4ratud, siis toimub p\u00f6\u00f6re \u00fcmber keskpunkti.<\/p>\n<ul>\n<li><em>translateX<\/em> \u2013 nihe X-telje suunal;<\/li>\n<li><em>translateY<\/em> \u2013 nihe Y-telje suunal;<\/li>\n<li><em>translateZ<\/em> \u2013 nihe Z-telje suunal (v\u00e4\u00e4rtused kasvavad vaataja suunas);<\/li>\n<li><em>skewX<\/em> \u2013 r\u00f6\u00f6pnihe X-telje suunal;<\/li>\n<li><em>skewY<\/em> \u2013 r\u00f6\u00f6pnihe Y-telje suunal;<\/li>\n<li><em>skewZ<\/em> \u2013 r\u00f6\u00f6pnihe Z-telje suunal;<\/li>\n<\/ul>\n<p>K\u00f5iki eespool loetletud transformatsioone kombineerib v\u00e4\u00e4rtus:<\/p>\n<ul>\n<li><em>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)<\/em> \u2013 defineerib 3D transformatsiooni 4X4 maatriksi abil.<\/li>\n<\/ul>\n<p>T\u00e4pselt samuti nagu 2D transformatsioonide puhul, saab m\u00e4\u00e4rata punkti, mille suhtes teisendused toimuvad. Kasutada on sama omadus <em>transform-origin<\/em>, millel antud juhul m\u00e4\u00e4ratakse kolm t\u00fchikuga eraldatud v\u00e4\u00e4rtust \u2013 l\u00e4htekoht x-teljel, l\u00e4htekoht y-teljel ja l\u00e4htekoht z-teljel.<\/p>\n<ul>\n<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li><em>left<\/em> \u2013 l\u00e4htekohaks horisontaalselt vasak serv;<\/li>\n<li><em>center<\/em> \u2013 l\u00e4htekohaks horisontaalselt keskkoht;<\/li>\n<li><em>right<\/em> \u2013 l\u00e4htekohaks horisontaalselt parem serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\n<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\n<\/ul>\n<\/li>\n<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li><em>top<\/em> \u2013 l\u00e4htekohaks vertikaalselt \u00fclemine serv;<\/li>\n<li><em>center<\/em> \u2013 l\u00e4htekohaks vertikaalselt keskkoht;<\/li>\n<li><em>bottom<\/em> \u2013 l\u00e4htekohaks vertikaalselt alumine serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\n<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt).<\/li>\n<\/ul>\n<\/li>\n<li>Z-telje jaoks on kasutada vaid \u00fcks variant v\u00e4\u00e4rtuseid:\n<ul>\n<li>arvv\u00e4\u00e4rtus pikslites, eemaldudes v\u00e4\u00e4rtused kahanevad;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! Vaikev\u00e4\u00e4rtusteks on 50% 50% 0!<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-origin: 50% 50% 150px;\r\n  transfom: rotateY(45deg);\r\n}<\/pre>\n<h2>3D vaate omadused<\/h2>\n<p>Tulenevalt ruumiliste teisenduste ise\u00e4rasustest on nende puhul kasutada ka omadused, mis m\u00e4\u00e4ravad, kuidas me elemente ruumis n\u00e4eme.<\/p>\n<h3>Ruumilise asendi n\u00e4itamine<\/h3>\n<p>3D teisenduste puhul on v\u00f5imalik m\u00e4\u00e4rata, kas mingi kindla elemendi t\u00fctarelemendid hoiavad oma asendit 3D ruumis v\u00f5i mittes.<\/p>\n<p>Selleks on omadus <em>transform-style<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>flat<\/em> \u2013 elemendi t\u00fctarelemendid ei hoia oma 3D asendit;<\/li>\n<li><em>preserve-3d<\/em> \u2013 elemendi t\u00fctarelemendid hoiavad oma 3D asendit.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-style: preserve-3d;\r\n  transfom: rotateY(45deg);\r\n}<\/pre>\n<h3>Perspektiiv<\/h3>\n<p>3D teisenduste puhul saab m\u00e4\u00e4rata ka perspektiivi ehk kaugust vaatajast. Selleks kasutatakse omadust <em>perspective<\/em>, millel on kasutada j\u00e4rgmised v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>arvv\u00e4\u00e4rtus pikslites;<\/li>\n<li>none \u2013 samav\u00e4\u00e4rne arvuga 0, perspektiiv on m\u00e4\u00e4ramata, see on ka vaikev\u00e4\u00e4rtus.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transform-style: preserve-3d;\r\n  perspective 500px;\r\n}<\/pre>\n<p>Vaatepunkt<\/p>\n<p>M\u00e4\u00e4rata saab ka punkti, mille suhtes elemente vaadatakse. Selleks on omadus <em>perspective-origin<\/em>, millele tuleb m\u00e4\u00e4rata t\u00fchikutega eraldatud v\u00e4\u00e4rtused x-telje ja y-telje suhtes.<\/p>\n<ul>\n<li>X-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li>left \u2013 vaatekoht horisontaalselt vasak serv;<\/li>\n<li>center \u2013 vaatekohaks horisontaalselt keskkoht;<\/li>\n<li>right \u2013 vaatekohaks horisontaalselt parem serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades vasakust servast;<\/li>\n<li>protsendid elemendi laiuse suhtes (alustatakse vasakult).<\/li>\n<\/ul>\n<\/li>\n<li>Y-telje jaoks on kasutada j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\n<ul>\n<li>top \u2013 vaatekohaks vertikaalselt \u00fclemine serv;<\/li>\n<li>center \u2013 vaatekohaks vertikaalselt keskkoht;<\/li>\n<li>bottom \u2013 vaatekohaks vertikaalselt alumine serv;<\/li>\n<li>arvv\u00e4\u00e4rtus pikslites alustades \u00fclaservast;<\/li>\n<li>protsendid elemendi k\u00f5rguse suhtes (alustatakse \u00fclevalt)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! M\u00f5lema telje suhtes on vaikev\u00e4\u00e4rtusena 50%!<\/span><\/p>\n<h3>Elemendi n\u00e4htavus tagantpoolt vaadates<\/h3>\n<p>M\u00e4\u00e4rata saab ka seda, kas elemendid paistavad ka tagantpoolt vaadatuna (kui neid ruumis p\u00f6\u00f6rata). Omadusel <em>backface-visibility<\/em> on j\u00e4rgmised v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>visible \u2013 element on n\u00e4htavad ka tagantpoolt, vaikev\u00e4\u00e4rtus;<\/li>\n<li>hidden \u2013 element pole tagantpoolt n\u00e4htav.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div img {\r\n  backface-visibility: hidden;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"menu_order":10,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/500"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/500\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/500\/revisions\/501"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/500\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=500"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=500"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}