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.

Xpierwszy wymiarumieszcza element względem poziomej osi X
Ydrugi wymiarumieszcza element względem poziomej osi Y
Ztrzeci wymiarumieszcza 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