Portfolio

CSS 3D Transformacije

Vizualni vodič kroz trodimenzionalni prostor na webu

1. perspective

Određuje udaljenost između oka promatrača i $Z=0$ ravnine. Bez ovog svojstva, 3D transformacije izgledaju potpuno ravno (2D).

3D Prostor
transform: perspective(400px) rotateX(45deg);

2. rotateX() & rotateY()

Rotira element oko njegove vodoravne (X) ili okomite (Y) osi u 3D prostoru. Prijeđi mišem za rotaciju po Y osi.

Rotacija
transform: rotateY(180deg);

3. translateZ()

Pomiče element naprijed prema promatraču ili natrag od njega po Z-osi. Pozitivna vrijednost približava element.

Z-Os
transform: translateZ(80px);

4. scale3d()

Mijenja veličinu elementa po X, Y i Z osi. U kombinaciji s rotacijom stvara dubinski efekt povećanja ili smanjenja.

Skaliranje
transform: scale3d(1.2, 1.2, 2);