Transform 3D
Przestrzeń 3D zainicjowana jest za pomocą perspective.
Właściwość perspective nie jest zdolna do tworzenia efektów 3D sama w sobie, ponieważ podstawowe kształty nie mogą mieć głębi. Należy użyć właściwości transform do przesuwania i obracania obiektów w przestrzeni 3D (względem osi X, Y i Z), a perspective użyć do kontroli głębi.
| X | pierwszy wymiar | umieszcza element względem poziomej osi X |
| Y | drugi wymiar | umieszcza element względem poziomej osi Y |
| Z | trzeci wymiar | umieszcza element względem osi Z, która biegnie od ekranu do widza w przestrzeni 3D. |
Funkcje właściwości transform, do przekształcania w przestrzeni 3D:
- translateZ( tz )
- scaleZ( sz )
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
- rotate3d( a )
- matrix3d()
z perspective
transform: perspective(400px) translateZ(80px)
bez perspective
transform: translateZ(80px)
z perspective
transform: perspective(400px) scaleZ(1.5) rotateX(45deg)
bez perspective
transform: scaleZ(1.5) rotateX(45deg)
z perspective
transform: perspective(400px) rotateX(45deg) translateZ(80px)
bez perspective
transform: rotateX(45deg) translateZ(80px)
perspective( 300px ) translateZ( ? )
50px
30px
10px
0px
-10px
-30px
-50px
perspective( ? ) translateZ( 30px )
50px
100px
200px
400px
800px
1600px
perspective( ? ) translateZ( -30px )
50px
100px
200px
400px
800px
1600px
transform: perspective( ? ) rotateY(25deg);
50px
100px
200px
300px
400px
500px