Les transformations 3d

Lens Durandisse2
Les bases HTML/CSS

En fouillant un peu partout les sujets sur la perspective,

J'ai trouvé ceci : http://www.the-art-of-web.com/css/3d-transforms/

Ca veut dire quoi TranslateZ, RotateZ, -webkit-backface-visibility: hidden, perspective?

L'exemple du dé m'abasourdi

(Répondez moi si vous avez un peu de temps car je crois que ca va être long)

Ou même un site qui explique bien svp

Merci :)

3 réponses

TransientDev

Bonsoir,
je n'ai jamais utilisé ces fonctions mais pour translate Z je pense que c'est pour modifier la profondeur et rotate Z pour faire une rotation comme celle d'un carousel. Et backface-visibility: veut dire que l'objet ne sera pas visible lorsqu'il ne sera pas face a l'ecran. Pour reprendre l'exemple du carousel, tu ne vois pas l'arriere => il est caché. Pour perspective je ne sais pas par contre

Grafikart
  • TranslateZ permet de faire reculer l'élément sur la profondeur (peu importe la perspective)
  • RotateZ permet de retourner l'élément selon l'axe des Z, mais ça équivaut à un rotate() classique en fait
  • backface-visibility permet de dire si un élément doit être visible de dos. Si tu le retourne de plus de 90° selon l'axe Y
  • perspective permet de définir la profondeur, là c'est un peu complexe alors je te renvois sur ce lien http://www.html5-css3.fr/css3/transformations-3d-css3
Lens Durandisse2
Auteur

Je comprends beaucoup mieux maintenant

Cependant, je vais aller voir le site de Grafikart pour la perspective car je suis un peu perdu sur la perspective