transform
English [trænsˈfɔ:m] US [trænsˈfɔ:rm]
vt.Transform; change
vi.Change
n.[number] transformation
propriété de transformation CSS syntaxe
Rôle : L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. Pour mieux comprendre la propriété transform, consultez cette démo.
Syntaxe : transform : none|transform-functions
Description : none ne définit aucune conversion. Matrix(n,n,n,n,n,n) définit une transformation 2D, en utilisant une matrice de six valeurs. Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) définit une transformation 3D en utilisant une matrice 4x4 de 16 valeurs. translate(x,y) définit une transformation 2D. Translate3d(x,y,z) définit la transformation 3D. translateX(x) définit la transformation, en utilisant uniquement la valeur de l'axe X. translateY(y) définit la transformation, en utilisant uniquement la valeur de l'axe Y. translateZ(z) définit une translation 3D, en utilisant uniquement la valeur de l'axe Z. scale(x,y) définit la transformation de mise à l'échelle 2D. scale3d(x,y,z) définit la transformation de mise à l'échelle 3D. scaleX(x) Définit la transformation de mise à l'échelle en définissant la valeur de l'axe X. scaleY(y) définit la transformation de mise à l'échelle en définissant la valeur de l'axe Y. scaleZ(z) Définit la transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z. Rotate(angle) Définit la rotation 2D, en spécifiant l'angle dans le paramètre. rotate3d(x,y,z,angle) définit la 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. skew(x-angle,y-angle) définit une transformation d'inclinaison 2D le long des axes X et Y. skewX(angle) définit une transformation d'inclinaison 2D le long de l'axe X. skewY(angle) définit la transformation d'inclinaison 2D le long de l'axe Y. perspective(n) Définit la vue en perspective pour l'élément de transformation 3D.
Remarque : Internet Explorer 10, Firefox et Opera prennent en charge l'attribut transform. Internet Explorer 9 prend en charge une propriété alternative -ms-transform (pour les transformations 2D uniquement). Safari et Chrome prennent en charge les propriétés alternatives -webkit-transform (transformations 3D et 2D). Opera ne prend en charge que la conversion 2D.
propriété de transformation CSS exemple
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne