Conversion 3D CSS3

Transforms 3D

CSS3 vous permet d'utiliser la 3D pour formater élément de conversion.

Dans ce chapitre, vous apprendrez quelques-unes des méthodes de conversion 3D:

Cliquez sur les éléments suivants pour voir la différence entre 2D et 3D Conversion Conversion entre:

2D tourner

rotation 3D

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.

属性
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-

Procédé rotateX (), dont les éléments autour d'un nombre donné de degrés de rotation dans l'axe des abscisses.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

Procédé rotateY (), dont les éléments autour d'un nombre donné de degrés de rotation dans l'axe des ordonnées.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Le tableau suivant répertorie toutes les propriétés de transformation:

propriété	description	CSS
transformer	Appliquée à la 2D de l'élément ou de la conversion 3D.	3
transformer origine	Il vous permet de changer la position de l'élément à convertir.	3
transformer style	Mise à disposition était de savoir comment les éléments imbriqués sont affichés dans l'espace 3D.	3
perspective	Provisions 3D d'éléments d'effet de perspective.	3
perspective d' origine	Une position prédéterminée de la partie inférieure de l'élément 3D.	3
backface visibilité	Définir les éléments lorsqu'ils ne sont pas en face de l'écran est visible.	3

fonction	description
matrix3d (n, n, n,n, n, n, n, n, n, n,n, n, n, n, n, n)	conversion 3D définie en utilisant 16 valeurs matrice 4x4.
translate3d(x, y, z)	transformation 3D définies.
translateX(x)	Définir la conversion 3D, en utilisant uniquement les valeurs de l'axe X.
translateY(y)	Définir la conversion 3D, en utilisant uniquement les valeurs de l'axe Y.
translateZ(z)	Définir la conversion 3D, en utilisant uniquement les valeurs de l'axe Z.
Scale3D(x, y, z)	Définir la transformation 3D à grande échelle.
scaleX(x)	3D transformation d'échelle est définie par une valeur donnée de l'axe des X.
scaleY(y)	3D transformation d'échelle est définie par une valeur donnée de l'axe Y.
scaleZ(z)	3D transformation d'échelle est définie par une valeur donnée de l'axe Z.
Rotate3D (x, y, z,angle)	Définir la rotation 3D.
rotateX(angle)	Définie le long de l'axe X de la rotation 3D.
rotateY(angle)	Défini le long de la rotation de l'axe Y 3D.
rotateZ(angle)	Définie le long de l'axe Z de rotation 3D.
perspective(n)	vue en perspective 3D de la définition de l'élément de conversion.