Document

3D transformacije

3D transformacije proširuju mogućnosti 2D transformacija dodavanjem Z osi, stvarajući efekt dubine. Za rad s 3D transformacijama trebamo razumjeti nekoliko ključnih CSS svojstava.

Ključna svojstva za 3D transformacije

perspective: Definira koliko će 3D efekt biti izražen
perspective-origin: Određuje položaj gledišta
transform-style: Kontrolira kako će se ugniježđeni elementi ponašati
backface-visibility: Određuje hoće li se "stražnja strana" elementa prikazati

3D funkcije transformacije

rotateX, rotateY, rotateZ

Hover me

translateZ

0px

50px

100px

translateZ pomiče element naprijed ili nazad po Z osi.

transform: translateZ(100px);

Stvaranje 3D objekata

3D transformacije nam omogućuju stvaranje trodimenzionalnih objekata poput kocke. Pređite mišem preko kocke da biste vidjeli efekt.

3D Kocka

Prednja

Stražnja

Desna

Lijeva

Gornja

Donja