Pomiće element u 3D prostoru po x, y i z osi.
Ova funkcija koristi se kada trebamo premjestiti element u dubinu, lijevo/desno ili gore/dolje. TranslateZ ne mijenja veličinu elementa nego samo njegov položaj u 3D prostoru.
div {
transform: translate3d(50px, 0, 50px);
}
Rotira element oko osi. RotateX vrti oko horizontalne osi, rotateY oko vertikalne osi, a rotateZ oko dubinske osi.
Ova funkcija se često koristi za stvaranje animacija ili 3D vizualnih efekata na elementima. Najčešće se koristi rotateY za efekt okretanja kartice.
div {
transform: perspective(400px) rotateY(45deg);
}
Povećava ili smanjuje veličinu elementa u 3D prostoru prema zadanim parametrima.
Korištenjem ove funkcije element možemo učiniti većim ili manjim bez promjene njegovog sadržaja. Često se koristi kod hover efekata kako bi element privukao pažnju korisnika.
div {
transform: scale3d(1.5, 1.5, 1);
}
Dodaje dubinu i čini 3D transformacije realističnijima. Manja vrijednost znači jaču perspektivu.
Perspective se primjenjuje na roditeljski element i utječe na sve njegove djecu koja koriste 3D transformacije. Bez perspective svojstva, 3D transformacije neće biti vidljive.
div {
perspective: 400px;
}