Derniers tutoriels de développement web
 

CSS Transforms 3D


CSS3 3D Transforms

CSS3 vous permet de formater vos éléments en utilisant les transformations 3D.

Passez la souris sur les éléments ci-dessous pour voir la différence entre une 2D et une transformation 3D:

2D tourner
rotation 3D

Support du navigateur pour les Transformées 3D

Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.

Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.

Propriété
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

CSS3 3D Transforms

Dans ce chapitre, vous allez en apprendre davantage sur les méthodes de transformation 3D suivants:

  • rotateX()
  • rotateY()
  • rotateZ()

Le rotateX() Méthode

Rotation X

Le rotateX() méthode tourne un élément autour de son axe X à un degré donné:

Exemple

div {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}
Essayez - le vous - même »

Le rotateY() Méthode

Rotation Y

Le rotateY() méthode tourne un élément autour de son axe Y à un degré donné:

Exemple

div {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}
Essayez - le vous - même »

Le rotateZ() Méthode

Le rotateZ() méthode tourne un élément autour de son axe Z à un degré donné:

Exemple

div {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 »


CSS3 Transform Properties

Le tableau ci-dessous toutes les propriétés de transformation 3D:

Propriété La description
transform Applique une transformation 2D ou 3D à un élément
transform-origin Permet de modifier la position des éléments transformés
transform-style Indique comment les éléments imbriqués sont rendus dans l'espace 3D
perspective Indique le point de vue sur la façon dont les éléments 3D sont considérés
perspective-origin Indique la position inférieure des éléments 3D
backface-visibility Définit si oui ou non un élément doit être visible lorsqu'ils ne sont pas face à l'écran

3D Transform Méthodes

Fonction La description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Définit une transformation en 3D, en utilisant une matrice 4x4 de 16 valeurs
translate3d(x,y,z) Définit une traduction 3D
translateX(x) Définit une traduction 3D, en utilisant seulement la valeur pour l'axe X
translateY(y) Définit une traduction 3D, en utilisant seulement la valeur de l'axe Y
translateZ(z) Définit une traduction 3D, en utilisant seulement la valeur de l'axe Z
scale3d(x,y,z) Définit une transformation d'échelle 3D
scaleX(x) Définit une transformation d'échelle 3D en donnant une valeur pour l'axe X
scaleY(y) Définit une transformation d'échelle 3D en donnant une valeur pour l'axe Y
scaleZ(z) Définit une transformation d'échelle 3D en donnant une valeur pour l'axe Z
rotate3d(x,y,z,angle) Définit une rotation 3D
rotateX(angle) Définit une rotation 3D le long de l'axe X
rotateY(angle) Définit une rotation 3D le long de l'axe Y.
rotateZ(angle) Définit une rotation 3D le long de l'axe Z
perspective(n) Définit une vue en perspective d'un élément 3D transformé