Comment utiliser la transformation en CSS

La propriété transform en CSS est utilisée pour effectuer des transformations géométriques sur des éléments, notamment la translation, la mise à l'échelle, la rotation et l'inclinaison. Son utilisation inclut : traduction : translateX(x)/translateY(y)/translate(x, y) mise à l'échelle : scaleX(x)/scaleY(y)/scale(x, y) rotation : rotate(angle)/rotateX(angle )/rotateY(angle)/rotateZ(angle) skew: skewX(angle)/skewY(angle)

Utilisation de la transformation en CSS

L'attribut transform est utilisé pour effectuer des transformations géométriques sur des éléments en CSS , y compris la translation, le zoom, la rotation et l'inclinaison. Il fournit des fonctionnalités puissantes pour créer divers effets visuels tels que l'animation, le morphing et la distorsion.

Usage

La syntaxe de l'attribut transform est la suivante :

<code class="css">transform: <transform-function> [<transform-function>]...;</code>

Parmi eux, <transform-function> peut être l'une des fonctions de transformation suivantes : <transform-function> 可以是以下任何变换函数：

• translateX(x)：平移元素沿 x 轴
• translateY(y)：平移元素沿 y 轴
• translate(x, y)：平移元素沿 x 和 y 轴
• scaleX(x)：缩放元素沿 x 轴
• scaleY(y)：缩放元素沿 y 轴
• scale(x, y)：缩放元素沿 x 和 y 轴
• rotate(angle)：旋转元素一个角度
• rotateX(angle)：沿 x 轴旋转元素
• rotateY(angle)：沿 y 轴旋转元素
• rotateZ(angle)：沿 z 轴旋转元素
• skewX(angle)：倾斜元素沿 x 轴
• skewY(angle)

translateX(x) code> : Traduction de l'élément le long de l'axe x<p><strong><code>translateY(y) : Traduction de l'élément le long de l'axe y

translate(x, y) : Traduire l'élément le long des axes x et y <p></p> <code>scaleX(x) : Mettre à l'échelle l'élément le long de l'axe x

scaleY(y) : Mettre à l'échelle l'élément le long de l'axe y

scale(x, y) : redimensionnez l'élément le long des axes x et y<p></p> <code>rotate(angle) : faites pivoter l'élément de an angle

rotateX(angle) : Faites pivoter l'élément le long de l'axe des x

rotateY(angle) : Faites pivoter l'élément le long de l'axe des y

rotateZ(angle) : fait pivoter l'élément le long de l'axe z

• skewX(angle) : incline les éléments le long de l'axe x
• skewY(angle) code> : Incliner les éléments le long de l'axe y
• Transformations multiples

L'attribut de transformation peut combiner plusieurs fonctions de transformation, séparées par des espaces :

<code class="css">transform: translate(50px, 100px) rotate(45deg) scale(2);</code>

Unités combinées

• Les valeurs de transformation peuvent inclure des pixels (px ), pourcentages (%), ou autres unités CSS.

Appliqué aux éléments 🎜🎜🎜L'attribut transform peut être appliqué à n'importe quel élément HTML, mais est souvent utilisé pour créer des animations et des effets visuels, tels que : 🎜🎜🎜Faire pivoter les éléments de menu 🎜🎜Redimensionner les boutons pour indiquer une interaction 🎜🎜Déplacer éléments en réponse à l'utilisateur Entrez 🎜🎜Transformer les images pour créer des effets uniques🎜🎜🎜🎜Notez que la propriété 🎜🎜🎜🎜transform affecte la zone de mise en page d'un élément, pas sa zone de contenu. 🎜🎜L'attribut transform est largement pris en charge dans les navigateurs modernes, mais peut nécessiter un préfixe de fournisseur dans les navigateurs plus anciens. 🎜🎜

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!