Maison > Article > interface Web > Comment utiliser l'attribut de transformation CSS

Comment utiliser l'attribut de transformation CSS

藏色散人original: 2019-05-30 09:31:013867parcourir

La propriété css 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. La syntaxe est transform : none|transform-functions.

Comment utiliser l'attribut de transformation CSS ?

Fonction : L'attribut transform applique une transformation 2D ou 3D à l'élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

Syntaxe :

transform: none|transform-functions

Description :

● none La définition n'est pas convertie.

Quantity matrice(n,n,n,n,n,n) Définissez la transformation 2D, en utilisant une matrice de six valeurs.

Quantity matrice3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Définir une transformation 3D, en utilisant 16 valeurs de matrice 4x4 .

Quantity translation(x,y) Définition de la transformation 2D.

Quantity translation3d(x,y,z) Définit la transformation 3D.

Quantity translationX(x) Définissez la transformation, en utilisant simplement la valeur de l'axe X.

Quantity translationY(y) Définissez la transformation, en utilisant simplement la valeur de l'axe Y.

● Translatedz (Z) définit la conversion 3D, mais utilise uniquement la valeur de l'axe Z.

Quantity scale(x,y) Définition de la transformation de mise à l'échelle 2D.

● scale3d(x,y,z) définit la transformation de mise à l'échelle 3D.

● scaleX(x) Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe X.

Quantity scaleY(y) Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe Y.

Quantity scaleZ(z) Définit la transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z.

greet(angle) Définit la rotation 2D, précisez l'angle dans le paramètre.

greet3d(x,y,z,angle) Définit la rotation 3D.

greetX(angle) Définit une rotation 3D le long de l'axe X.

greetY(angle) Définit la rotation 3D le long de l'axe Y.

greetZ(angle) Définit une rotation 3D le long de l'axe Z.

Quantity skew(x-angle,y-angle) Définit une transformation d'inclinaison 2D le long des axes X et Y.

Quantity skewX(angle) Définit la transformation d'inclinaison 2D le long de l'axe X.

Quantity skewY(angle) Définit la transformation d'inclinaison 2D le long de l'axe Y.

Quantity perspective(n) Définit la vue en perspective de 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 un attribut alternatif -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.

Exemple d'utilisation de l'attribut de transformation CSS

<!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>

Sortie d'effet :

Comment utiliser lattribut de transformation CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la propriété CSS background-positionArticle suivant：Comment utiliser la propriété CSS background-position

Articles Liés

Voir plus