Comment utiliser la transformation en CSS

L'attribut transform en CSS peut manipuler l'apparence des éléments, notamment : translation() : déplacer l'élément rotate() : faire pivoter l'élément scale() : redimensionner l'élément skew() : déformer l'élément matrice() : utiliser le matrice pour définir une perspective de transformation personnalisée () : Créer des effets 3D

Utilisation de transform en CSS

transform est un outil puissant en CSS permettant de manipuler l'apparence d'un élément sans affectant sa taille ou sa position. Il est implémenté via une série de fonctions de transformation, notamment : transform 是 CSS 中用于操纵元素的外观，而不会影响其尺寸或位置的一个强大的属性。它通过一系列变换函数来实现，包括：

平移、旋转和缩放

• translate()：移动元素。
• rotate()：旋转元素。
• scale()：缩放元素。

示例：

/* 将元素向右移动 50px */
transform: translate(50px);

/* 顺时针旋转元素 30 度 */
transform: rotate(30deg);

/* 将元素放大到原始尺寸的 2 倍 */
transform: scale(2);

复合变换

transform 属性可以组合多个变换函数，以实现更复杂的效果。

示例：

/* 同时向右移动元素 50px 并将其向上旋转 30 度 */
transform: translate(50px) rotate(30deg);

变形

transform 也可用于变形元素，从而创建视觉上独特的形状。

• skew()：扭曲元素。
• matrix()：使用矩阵定义自定义变换。

示例：

/* 向右倾斜元素 10 度 */
transform: skew(10deg);

/* 使用矩阵定义自定义变换 */
transform: matrix(1, 0, 0.5, 1, 0, 0);

透视

transform 中的透视属性允许创建 3D 效果，使元素看起来具有深度。

示例：

/* 设置元素的透视，使其看起来具有深度 */
transform: perspective(500px);

/* 沿 z 轴旋转元素 */
transform: perspective(500px) rotateZ(30deg);

注意：

• transform 不会影响元素在文档流中的位置。
• 浏览器对 transform 属性的支持程度有所不同。
• 使用 transform

Traduction, rotation et mise à l'échelle🎜🎜

• translate() : Déplacer des éléments. 🎜
• rotate() : faire pivoter les éléments. 🎜
• scale() : éléments d'échelle. 🎜🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Compound Transform🎜🎜🎜 L'attribut transform peut combiner plusieurs fonctions de transformation pour obtenir des effets plus complexes. 🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Transform🎜🎜🎜transform peut également être utilisé pour transformer des éléments, créant ainsi des formes visuellement uniques. 🎜
  • skew() : Déformer les éléments. 🎜
  • matrix() : utilisez des matrices pour définir des transformations personnalisées. 🎜🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Perspective🎜🎜🎜 La propriété perspective dans transform permet la création d'un effet 3D qui donne l'impression que les éléments ont de la profondeur. 🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Remarque : 🎜🎜
    • transform n'affecte pas la position de l'élément dans le flux de documents. 🎜
    • La prise en charge par le navigateur de l'attribut transform varie. 🎜
    • Les performances peuvent être affectées lors de l'utilisation de transform, en particulier lors de l'animation de transformations complexes. 🎜🎜

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!