CSS3 transzformációk

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.

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.

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.

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.

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.

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

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

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

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.

A scaleX() függvénnyel vízszintesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

A scaleY() függvénnyel függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

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

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

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

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

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.