A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Transzformációk és átmenetek

Tanulási útmutató

Összefoglalás

A transzformációk segítségével az eleket két és három dimenzióban is transzformálhatjuk. Ebben a leckében a legfontosabb paramétereket tekintjük át, példákkal együtt.

Tartalomjegyzék

Transzformációk és átmenetek

Transzformációk és átmenetek

Megjegyzés

A transzformációk leírását a CSS Transforms dokumentum tartalmazza. Az alábbiakban ezek közül néhány, gyakrabban használt funkciót mutatunk be.

Az angolul tudók figyelmébe ajánljuk a Intro to CSS 3D transforms ˇ Intro to CSS 3D transforms cikket, amelyben számos jó, interaktívan módosítható példát találunk.

Kétdimenziós transzformációk

A transform tulajdonság segítségével transzformálhatjuk elemeinket.

Paraméterek és értékek:

A tulajdonságnak szóközzel elválasztva több transzformációt is megadhatunk.

A rotate() érték elforgatja az elemet a képernyő síkján, mégpedig a paraméterül kapott szöggel.
A rotateX() és a rotateY() értékek a paraméterül kapott szöggel forgatják el az elemet a képernyő vízszintes, és függőleges tengelye körül.
A scale() érték a paraméterül kapott egy vagy (vesszővel elválasztva) két számérték szorosára méretezi át az elemet. Az első paraméter a vízszintes, az opcionális második a függőleges átméretezésért felel.
A scaleX()/scaleY() értékek a paraméterül kapott számérték szeresére méterezi át az elemet vízszintesen/függőlegesen.
A skew()érték a paraméterül kapott egy vagy (vesszővel elválasztva) két szög mértékével ferdíti az elemet. Az első paraméter a vízszintes, az opcionális második a függőleges ferdítésért felel.
A skewX()/skewY() értékek a paraméterül kapott szöggel ferdítik el az elemet vízszintesen/függőlegesen.
A translate() érték a paraméterül kapott egy vagy (vesszővel elválasztva) két hosszúságérték mértékével tolja el az elemet. Az első paraméter a vízszintes, az opcionális második a függőleges eltolásért felel. A pozitív értékek jobbra/le a negatív értékek balra/fel történő eltolást eredményeznek.
A translateX()/translateY() értékek a paraméterül kapott hosszúságértékkel tolják el az elemet vízszintesen/függőlegesen.
A matrix() érték egy 3x3-as transzformációs mátrixot alkot, a paraméterül kapott(vesszővel elválasztott) hat értékkel, amelyek a fenti transzformációk kombinációját adják.

A transform tulajdonság értékei nem öröklődnek.

Példa - Transzformációk bemutatása

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Transzformáció</title>
<meta charset="utf-8">
<style type="text/css">
figure {
     margin:20px;
     float:left;
     border:1px dotted gray;
     background-color:lightgray;
     width:150px;
}
figcaption {
     padding:5px;
     font-family:Arial, Helvetica, sans-serif;
     margin:10px 0;
}
 figure:nth-child(2) img {
transform: scale(.75);
}
figure:nth-child(3) img {
transform: rotate(10deg);
}
figure:nth-child(4) img {
transform: translate(10px, 10px);
}
 figure:nth-child(5) img {
transform: skew(5deg, 5deg);
}
 figure:nth-child(6) img {
transform:  rotateX(30deg) rotateY(-60deg);
}
figure:nth-child(7) img {
transform:  skew(-30deg) skewY(5deg);
}
</style>
<body>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>Eredeti kép</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform: scale(.75)</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform: rotate(10deg)</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform: translate(10px, 10px);</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform: skew(5deg, 5deg);</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform:  rotateX(30deg) rotateY(-60deg)</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>skew(-30deg) skewY(5deg)</figcaption>
</figure>
</body>
</html>

Magyarázat

A példában ugyanazt a képet használtuk fel többször. A képek alatt látszik, hogy milyen transzformációt hajtottunk végre.

Vissza a tartalomjegyzékhez

A transzformáció kezdőpontja

A transzformációk eredetileg az elem középpontjától számolódnak, de ezt megváltoztathatjuk.

A transform-origin tulajdonság segítségével beállíthatjuk, hogy honnan számoljuk a transzformációt.

Paraméterek:

A tulajdonságnak megadhatunk egy vagy két (szóközzel elválasztott) paramétert.
Két paraméter esetén az első a vízszintes, a második a függőleges elmozgatásért felel.
Egy paraméter esetén az a vízszintes elmozdításért felel, míg a függőleges paraméternek automatikusan a center érték helyettesítődik be.
Pozitív értékek esetén az eredet balra-fel, negatív esetén jobbra le mozdul el.

Értékek:

Megadhatunk százalékos értékeket.
Megadhatunk hosszúság értékeket.
A left érték hatásra, a transzformáció az elem bal oldalától számítódik.
A top érték hatásra, a transzformáció az elem tetejétől számítódik.
A right érték hatásra, a transzformáció az elem jobb oldalától számítódik.
A bottom érték hatásra, a transzformáció az elem aljától számítódik.
A center érték hatásra, a transzformáció az elem középpontjától számítódik.

A transform-origin tulajdonság értékei nem öröklődnek.

Példa - Transzformáció középpontja

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Transzformáció eredete</title>
<meta charset="utf-8">
<style type="text/css">
figure {
     margin:20px;
     float:left;
     border:1px dotted gray;
     background-color:lightgray;
     width:150px;
}
figcaption {
     padding:5px;
     font-family:Arial, Helvetica, sans-serif;
     margin:10px 0;
}
figure img {
     transform: rotate(10deg);
}
 figure:nth-child(2) img {
transform-origin:50% 50%;
}
 figure:nth-child(3) img {
transform-origin:0% 0%;
}
 figure:nth-child(4) img {
transform-origin:top right;
}
 figure:nth-child(5) img {
transform-origin:bottom right;
}
</style>
<body>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>Eredeti kép<br>
    transform: rotate(10deg);</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform-origin:50% 50%;<br>
    Nincs változás, mert ez az alapbeállítás.</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform-origin:0% 0%; <br>
    A bal felső sarok körül történik a forgatás.</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform-origin:top right; <br>
    A jobb felső sarok körül történik a forgatás.</figcaption>
</figure>
<figure> <img src="http://lorempixel.com/150/150/sports/3/" alt="">
  <figcaption>transform-origin:bottom right; <br>
    A jobb alsó sarok körül történik a forgatás.</figcaption>
</figure>
</body>
</html>

Magyarázat

A példában ugyanazt a transzformációt (forgatás) mutatjuk be úgy, hogy különböző transform-origin értékeket állítunk be. Az első két példa megegyezik, mert az alapbeállítás az, hogy a kép középpontja körül történjen a transzformáció (transform-origin:50% 50%).

Vissza a tartalomjegyzékhez

Transzformáció 3D-ben

A transform tulajdonság segítségével 3D-s transzformációkat is végezhetünk elemeinken.

Paraméterek és értékek:

A tulajdonságnak szóközzel elválasztva több féle transzformációt is megadhatunk.

A perspective() transzformációval megadhatjuk, hogy mennyire legyen 3D-s az elem nézete.
- Az értéknek paraméterül adhatunk egy pozitív számértéket. Minél nagyobb értéket adhatunk meg, annál kevésbé lesz 3D-s a perspektíva.
A rotate3d() érték segítségével 3D-ben forgathatjuk el elemünket.
- Először három vesszővel elválasztott számértéket kell megadni paraméterül. Ezek az elforgatás tengelyét határozzák meg.
- Végül adjuk meg az elforgatás mértékét, egy szöggel.
A rotateX(), rotateY(), rotateZ() értékek az X, Y, Z koordináta tengelyek körüli elforgatásért felelnek.
- Az értékeknek egy szöget adhatunk paraméterül, ami az elforgatás nagyságát adják.
A scale3D() érték segítségével átméretezhetjük elemünket.
- Az értéknek három vesszővel elválasztott számértéket kell megadni paraméterül. Ezek az X, Y, Z koordináta mentén történő átméretezés arányszámát adják meg. A negatív értékek tükrözést eredményeznek.
A scaleX(), scaleY(), scaleZ() értékek az X, Y, Z koordináta tengelyek körüli átméretezésért felelnek.
- Az értéknek egy számértéket adunk paraméterül, ez az átméretezés arányszámát adja meg. A negatív értékek tükrözést eredményeznek.
A translate3d() érték az elemek 3D-s eltolásáért felel.
- Az értéknek három vesszővel elválasztott hosszúságértéket kell megadni paraméterül. Ezek az X, Y, Z koordináta mentén történő eltolás mértékét adják meg. A pozitív értékek jobbra/le/ki a negatív értékek balra/fel/be történő eltolást eredményeznek.
A translateX(), translateY(), translateZ() értékek az X, Y, Z koordináta tengelyek menti eltolásért felelnek.
- Az értéknek egy hosszúságértéket adunk paraméterül, ami az eltolás mértékét határozza meg.
A matrix3d() érték egy 4x4-es transzformációs mátrixot alkot, a paraméterül kapott (vesszővel elválasztott) tizenhat értékkel.

Tulajdonságok:

A transform tulajdonság értékei nem öröklődnek.

Vissza a tartalomjegyzékhez

A transzformáció stílusa (transform-style)

A transform-style tulajdonság segítségével meghatározhatjuk, hogy a transzformált elem gyermekei hogyan viselkedjenek a transzformáció során.

Értékek:

A flat érték hatására az elem összes gyermeke bekerül a transzformált elemünk 2D-s síkjába.
A preserve-3d érték megőrzi a gyermek elemek 3D-s perspektíváját.

A transform-style tulajdonság értékei nem öröklődnek.

Vissza a tartalomjegyzékhez

A transzformáció perspektívája (perspective)

A perspective tulajdonság segítségével meghatározhatjuk a transzformált elem gyermekeinek perspektíváját.

Értékek:

Megadhatunk tetszőleges pozitív számértéket. Minél nagyobb értéket adhatunk meg, annál kevésbé lesz 3D-s a perspektíva.
A none érték hatása, megegyezik a 0 értékkel, azaz nem változik az eredeti perspektíva.

A perspective tulajdonság értékei nem öröklődnek.

Vissza a tartalomjegyzékhez

A perspektíva középpontja (perspective-origin)

A perspective-origin tulajdonság segítségével megahatározhatjuk a perspective tulajdonság középpontját.

Paraméterek:

A tulajdonságnak egy vagy két (szóközzel elválasztott) paramétert adhatunk meg.
Két paraméter esetén az első a vízszintes, a második a függőleges elmozgatásért felel.
Egy paraméter esetén az a vízszintes elmozdításért felel, míg a függőleges paraméternek automatikusan a center érték helyettesítődik be.
Pozitív értékek esetén az eredet balra-fel, negatív esetén jobbra le mozdul el.

Értékek:

Megadhatunk százalékos értékeket.
Megadhatunk hosszúság értékeket.
A left érték hatásra, a perspektíva a gyermek elem bal oldalától számítódik.
A top érték hatásra, a perspektíva a gyermek elem tetejétől számítódik.
A right érték hatásra, a perspektíva a gyermek elem jobb oldalától számítódik.
A bottom érték hatásra, a perspektíva a gyermek elem aljától számítódik.
A center érték hatásra, a perspektíva a gyermek elem középpontjától számítódik.

A perspective-origin tulajdonság értékei nem öröklődnek.

Példa - 3D transzformációk – példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Transzformáció eredete</title>
<meta charset="utf-8">
<style type="text/css">
section {
     height: 200px;
     margin:20px 20px 60px 20px;
     position: relative;
     width: 200px;
     float:left;
}
.kocka {
     height: 100%;
     position: absolute;
     transform: translateZ(-100px);
     transform-style: preserve-3d;
     width: 100%;
}
.kocka div {
     display: block;
     position: absolute;
     width: 196px;
     height: 196px;
     border: 2px solid black;
     line-height: 196px;
     font-size: 100px;
     text-shadow:2px 2px 2px black;
     font-weight: bold;
     color: white;
     text-align: center;
     margin:0;
     font-family:Verdana, Geneva, sans-serif;
     color:white;
}
.kocka .eleje {
     background-color: rgba(210, 255, 169, 0.4);
     transform: translateZ(100px);
}
.kocka .hatulja {
     background-color: rgba(139, 223, 255, 1);
     transform: rotateX(0deg) translateZ(-100px);
}
.kocka .jobboldala {
     background-color: rgba(255, 169, 232, 1);
     transform: rotateY(90deg) translateZ(100px);
}
.kocka .baloldala {
     background-color: rgba(208, 169, 255, 1);
     transform: rotateY(-90deg) translateZ(100px);
}
.kocka .teteje {
     background-color: rgba(254, 255, 169, 1);
     transform: rotateX(90deg) translateZ(100px);
}
.kocka .alja {
     background-color: rgba(155, 155, 155, 1);
     transform: rotateX(-90deg) translateZ(100px);
}
 section:nth-child(1) {
 perspective: 300px;
 perspective-origin: 50% 50%;
}
 section:nth-child(2) {
 perspective: 100px;
 perspective-origin: 0% 0%;
}
 section:nth-child(3) {
 perspective: 100px;
 perspective-origin: 30% 50%;
}
 section:nth-child(4) {
 perspective: 100px;
 perspective-origin: 70% 50%;
}
 section:nth-child(5) {
 perspective: 100px;
 perspective-origin: 10% 90%;
}
 section:nth-child(6) {
 perspective: 100px;
 perspective-origin: 90% 10%;
}
figcaption {
     padding:10px;
     position:absolute;
     bottom:-130px;
     display:block;
     font-size:110%;
}
</style>
<body>
<section>
  <figure  class="kocka">
    <div class="eleje">1</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
<section>
  <figure  class="kocka">
    <div class="eleje">2</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
<section>
  <figure  class="kocka">
    <div class="eleje">3</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
<section>
  <figure  class="kocka">
    <div class="eleje">4</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
<section>
  <figure  class="kocka">
    <div class="eleje">5</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
<section>
  <figure  class="kocka">
    <div class="eleje">6</div>
    <div class="hatulja"></div>
    <div class="jobboldala"></div>
    <div class="baloldala"></div>
    <div class="teteje"></div>
    <div class="alja"></div>
  </figure>
</section>
</body>
</html>

Magyarázat

A példában egy kockát látuk, ahol különböző perspective és perspective-origin értékeket adtunk meg.

Vissza a tartalomjegyzékhez

Az elem hátoldalának láthatósága (backface-visibility)

A backface-visibility tulajdonság segítségével az elem hátoldalának láthatóságát állítjuk be.

Értékek:

A visible érték hatására, az elem hátoldala láthatóvá válik, ha egy transzformáció során az kerül előtérbe.
A hidden érték esetén az elem hátoldala nem lesz látható.

A backface-visibility tulajdonság értékei nem öröklődnek.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.