Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

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.

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 transform tulajdonság értékei nem öröklődnek.

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

Interaktív példa
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:

Értékek:

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

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

Interaktív példa
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.

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 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:

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:

Értékek:

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

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

Interaktív példa
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 backface-visibility tulajdonság értékei nem öröklődnek.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
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.