Zadatak 6.7.

Uvod u 3D transformacije

CSS transformacije omogućavaju pomicanje, rotaciju, povećavanje i iskrivljenje elemenata na stranici.

Funkcija rotate()

Rotate() funkcija rotira element prema zadanim parametrima.


                    div {

                    transform: rotate3d(1, 2, 1, 45deg);
                    }


                    div {

                    transform: rotateX(45deg);
                    }


                    div {

                    transform: rotateY(45deg);
                    }


                    div {

                    transform: rotateZ(45deg);
                    }

rotate3d()

rotateX()

rotateY()

rotateZ()

Funkcija scale()

Scale() funkcija povećava ili smanjuje veličinu elementa prema zadanim parametrima.


                    div {

                    transform: scale3d(1.3, 0.8, 0.4);
                    }

scale()

Funkcija perspective()

Perspective() funkcija definira razmak između korisnika i Z osi.


                    div {

                    transform: perspective(10cm) rotateX(-15deg) rotateZ(15deg) rotateY(30deg);
                    }

perspective()

Funkcija matrix()

Matrix() definira 3D transformaciju koristeći 4x4 matrix od 16 vrijednosti.


                    div {

                    transform: matrix(0.7, 0.1, 0.7, 0, -0.6, 0.7, 0.2, 0, -0.5, -0.8, 0.7, 0, 10, 10, 0, 1);
                    }

matrix()