HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 transzformációk


    A CSS3 lehetőséget biztosít síkbeli és térbeli transzformációkra, forgatást, döntést, átméterezés...                         

Programozott tananyag:


Elforgatás
A CSS3 lehetővé teszi a HTML elemek középpontjuk körül történő elforgatását a transform tulajdonság segítségével állíthatjuk be.

Elforgatás az X tengely mentén
A transform tulajdonság segítségével a HTML elemek az X tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.

Elforgatás az Y tengely mentén
A transform tulajdonság segítségével a HTML elemek az Y tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.

Elforgatás a Z tengely mentén
A transform tulajdonság segítségével a HTML elemek az Z tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.

Elforgatás az 3D tengely mentén
A transform tulajdonság segítségével a HTML elemek az térben megadott tengely körül is elforgathatóak. Az x, y és z jellemzők a tengely irányát adják meg. A negyedik érték pedig az elforgatás mértékét.

Vízszintes eltolás
A translateX() függvény pozitív érték esetén jobbra, negatív szám esetén balra tolhatja a HTML elemet.

Függőleges eltolás
A translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.

Közelítés-távolítás
A translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.

3D eltolás
A translate3d() függvény segítségével egy lépésben megadhatók az eltolás x, y és z irányú összetevőinek értékei.

Vízszintes átméretezés
A scaleX() függvénnyel vízszintesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

Függőleges átméretezés
A scaleY() függvénnyel függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

Vízszintes és függőleges átméretezés
A scale() függvénnyel vízszintesen és függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

Vízszintes döntés
A skewX() függvénnyel adhatjuk meg a megdöntés szögét, az x tengely mentén deg-ben.

Függőleges döntés
A skewY() függvénnyel adhatjuk meg a megdöntés szögét, az Y tengely mentén deg-ben.

Vízszintes és függőleges döntés
A vízszintes és függőleges irányú megdöntés szögei egy lépésben megadhatók a skew() függvénnyel deg-ben.

A transzformáció középpontja
A transzformáció középpontja alapértelmezetten a HTML elem középpontjával esik egybe, de ettől eltérhetünk a transform-origin tulajdonság felhasználásával.

Univerzális kocka készítése CSS3-al
A HTML weboldalunk elemeiből csupán CSS3 stílusdeklarációk segítségével 3 dimenziós kockát építhetünk a következő módon.