Extrait du nouveau livre de Tiffany "CSS Master, deuxième édition"

La fonction de transformation CSS nous donne la possibilité de créer des effets et des interactions que d'autres méthodes ne peuvent pas réaliser. En combinant les transitions et les animations, nous pouvons créer des éléments et des interfaces qui tournent, dansent et évoluent. En particulier la transformation tridimensionnelle, il peut simuler des objets physiques. Cet article explorera les fonctions de transformation bidimensionnelles (des fonctions tridimensionnelles sont introduites ici).

Il existe principalement quatre types de fonctions de transformation bidimensionnelles: rotation, échelle, inclinaison et déplacement. Six autres fonctions nous permettent de transformer des éléments le long d'une seule dimension: Scalex et Scaley;

points clés

• Les quatre principales fonctions de transformation bidimensionnelle dans CSS sont tournées, échelle, biais et traduire. Ces fonctions nous permettent de créer des effets et des interactions que d'autres méthodes ne peuvent pas réaliser, y compris des éléments et des interfaces qui tournent, dansent et évoluent.
La fonction
• rotation () tourne les éléments à un angle spécifié autour de l'origine transformateur. Peut être tourné dans le sens horaire ou dans le sens antihoraire. La fonction d'échelle peut augmenter ou diminuer la taille d'un élément dans la dimension x, la dimension y ou les deux. La fonction de traduire est la distance entre la position de dessin de l'élément et sa position de disposition par la distance spécifiée.
• Les fonctions de transformation peuvent être combinées pour créer des transformations plus complexes. Cependant, l'ordre dans lequel ces fonctions sont appliqués est importante car elle modifie considérablement le résultat. En effet, le navigateur multiplie la matrice de chaque fonction en créant une nouvelle matrice.
• La dernière version de la spécification de transformation CSS ajoute des attributs de traduire, de rotation et d'échelle à CSS. Ces propriétés fonctionnent de manière très similaire à leurs fonctions de transformation correspondantes, mais les valeurs sont séparées de l'espace plut?t que séparées par des virgules. Cela permet de gérer les transformations de rotation, de traduction ou d'échelle individuellement à partir d'autres transformations. Cependant, la prise en charge du navigateur pour ces propriétés est toujours limitée.

rotation ()

La transformée de rotation tourne les éléments autour de l'origine transformée à un angle spécifié. Utilisez Rotate () pour incliner les éléments dans le sens des aiguilles d'une montre (valeur d'angle positif) ou dans le sens antihoraire (valeur d'angle négative). Son effet ressemble beaucoup à un moulin à vent ou à une roue éolienne, comme indiqué ci-dessous.

La fonction

rotation () accepte la valeur de l'unité d'angle. Les unités d'angle sont définies par les valeurs CSS et le niveau du module unitaire 3. Ceux-ci peuvent être deg (degré), rad (radian), grad (gradient) ou des unités de virage. Une rotation complète est égale à 360 degrés, 6.28rad, 400 grad ou 1ur.

sauf animé ou en transition, la valeur de rotation dépassant une rotation (par exemple, 540deg ou 1,5 tour) sera rendue en fonction des valeurs restantes. En d'autres termes, l'effet de rendu de 540 degrés est le même que celui de 180 degrés (540 degrés moins 360 degrés), et l'effet de rendu de 1,5 virage est le même que celui de 0,5 virage (1,5 - 1). Cependant, les transitions ou les animations de 0Deg à 540 degrés ou de 1 tour à 1,5 tour fera tourner l'élément une fois et demie.

Fonctions de mise à l'échelle bidimensionnelles: Scale, Scalex et Scaley

En utilisant la fonction de mise à l'échelle, nous pouvons augmenter ou diminuer la taille de rendu d'un élément sur la dimension x (Scalex), la dimension Y (Scaley), ou les deux (échelle). La mise à l'échelle est indiquée dans la figure ci-dessous, où la bordure représente la limite d'origine de la bo?te et le nombre indique son point central.

Chaque fonction de mise à l'échelle accepte un multiplicateur ou un facteur comme paramètre. Ce multiplicateur peut être presque n'importe quel nombre positif ou négatif. Les valeurs de pourcentage ne sont pas prises en charge. Un multiplicateur positif supérieur à 1 augmente la taille de l'élément. Par exemple, l'échelle (1,5) augmente la taille d'un élément dans les directions x et y de 1,5 fois. Un multiplicateur positif entre 0 et 1 réduira la taille de l'élément.

Les valeurs inférieures à 0 entra?neront également une évolution ou une diminution de la taille de l'élément et créeront une transformation réfléchissante (FLIP).

AVERTISSEMENT: L'utilisation de l'échelle (0) fera dispara?tre l'élément car le résultat de la multiplication du nombre de zéro est zéro.

Créez la transformée d'identité à l'aide de l'échelle (1), ce qui signifie qu'il est dessiné sur l'écran comme si aucune transformée de mise à l'échelle n'était appliquée. L'utilisation de l'échelle (-1) ne modifiera pas la taille du tirage de l'élément, mais les valeurs négatives entra?neront la reflété de l'élément. Même si l'élément n'affiche pas la transformation, il déclenche toujours le nouveau contexte d'empilement et inclut des blocs.

Vous pouvez utiliser la fonction d'échelle pour évoluer respectivement les dimensions x et y. Passez simplement deux paramètres: échelle (1,5, 2). Le premier paramètre évolue la dimension x; le deuxième paramètre évolue la dimension y. Par exemple, nous pouvons utiliser l'échelle (-1, 1) pour refléter un objet individuellement le long de l'axe x. Le passage d'un seul paramètre évoluera deux dimensions par le même facteur.

Fonctions de traduction bidimensionnelle: tradlatex, tradlay et tradlate

L'élément de traduction compense la distance entre sa position de dessin et sa position de disposition par une distance spécifiée. Comme d'autres transformations, l'élément de traduction ne modifie pas sa position de décalage ou de décalage. Cependant, il affecte sa position visuelle à l'écran.

Chaque fonction de traduction bidimensionnelle (translatex, translatey et tradlate) accepte la longueur ou le pourcentage de paramètres. Les unités de longueur incluent les unités de pixels (PX), EM, REM et de la fenêtre (VW et VH).

La fonction Translatex modifie la position de rendu horizontal d'un élément. Si l'élément est à 0 pixels de la gauche, transition: transitionx (50px) déplace sa position de rendu de 50 pixels à droite de sa position de départ. De même, Translatey modifie la position de rendu vertical de l'élément. Transitiony (50px) déplace l'élément verticalement de 50 pixels.

En utilisant tradlate (), nous pouvons déplacer des éléments verticalement et horizontalement à l'aide d'une seule fonction. Il accepte jusqu'à deux paramètres: la valeur de traduction x et la valeur de traduction y. La figure ci-dessous montre l'effet d'un élément avec une valeur de transformation traduire (120%, -50px), où le carré vert à gauche est dans sa position d'origine, et le carré vert à droite est traduit horizontalement par 120% avec son élément (bordure pointillée) et traduit verticalement par -50px.

Passer un seul paramètre à traduire est équivalent à l'utilisation de Translatex; La valeur de traduction y sera définie sur 0. L'utilisation de Translate () est un choix plus concis. L'application de Translate (100px, 200px) est équivalente à Translatex (100px) Translatey (200px).

La valeur de traduction positive déplace l'élément vers la droite (pour Translatex) ou Down (pour Translatey). Une valeur négative déplace l'élément vers la gauche (Translatex) ou UP (Translatey).

Le panoramique est particulièrement utile pour déplacer un élément vers la gauche, la droite, le haut ou vers le bas. La mise à jour des valeurs des attributs de gauche, droite, supérieure et inférieure oblige le navigateur à recalculer les informations de mise en page de l'ensemble du document. Cependant, la transformation est calculée après la calcul de la disposition . Ils affectent l'emplacement de l'affichage de l'élément à l'écran, mais pas sa taille réelle. Oui, c'est bizarre de considérer la mise en page et le rendu de documents comme des concepts distincts, mais en termes de navigateur, ils sont en effet séparés. Les propriétés de transformation peuvent appara?tre dans les navigateurs près de chez vous

La dernière version de la spécification de transformation CSS ajoute des attributs de traduis, de rotation et d'échelle

à CSS. Les propriétés de transformation fonctionnent de manière très similaire à leurs fonctions de transformation correspondantes, mais les valeurs sont séparées de l'espace plut?t que séparées par les virgules. Par exemple, nous pouvons exprimer la transformation: Rotate3d (1, 1, 1, 45deg): Rotation: 1 1 1 45deg. De même, traduire: 15% 10% 300px est visuellement le même que la transformée: tradlate3d (15%, 10%, 300px), et l'échelle: 1,5 1,5 3 est la même que la transformation: Scale3d (1,5, 1,5, 3). En utilisant ces propriétés, nous pouvons gérer les transformations de rotation, de traduction ou d'échelle individuellement, plut?t que d'autres.

Au moment de la rédaction, la prise en charge du navigateur pour les propriétés de transformation est toujours très clairsemée. Chrome et Samsung Internet les soutiennent hors de la bo?te. Dans Firefox 60 et plus tard, le support est caché derrière un drapeau; Access About: Config and Set Layout.css.Individual-Transform.Enabled to true.

biais, skewx et asymétrie

La transformation d'inclinaison modifie l'angle et la distance entre les points tout en les gardant sur le même plan. Les transformations d'inclinaison sont également appelées transformations de cisaillement

, et elles déforment la forme de l'élément comme indiqué ci-dessous, où les lignes en pointillés représentent la bo?te de délimitation d'origine de l'élément.

Les fonctions d'inclinaison (Skew, Skewx et Skewy) acceptent la plupart des unités d'angle comme paramètres. Le degré, le gradient et le radian sont des unités d'angle efficaces pour la fonction d'inclinaison, tandis que l'unité de virage (peut-être évidemment) ne l'est pas.

La fonction Skewx coupe les éléments dans la direction x ou la direction horizontale (voir la figure ci-dessous). Il accepte un paramètre qui doit être une unité d'angle. Une valeur positive déplace l'élément vers la gauche et une valeur négative déplace l'élément vers la droite.

De même, la bibliothèque coupe les éléments dans la direction y ou la direction verticale. La figure suivante montre l'effet de la transformée: asymétrique (30deg). Le point à droite de l'origine se déplacera à la baisse à mesure que la valeur positive augmente. Les valeurs négatives déplacent ces points vers le haut.

Cela conduit à la fonction de biais. La fonction de biais nécessite un paramètre, mais peut accepter jusqu'à deux paramètres. Le premier paramètre inclinait l'élément dans la direction x et le deuxième paramètre inclinait l'élément dans la direction y. Si un seul paramètre est fourni, la deuxième valeur est supposée nul, ce qui le rend équivalent à l'inclinaison uniquement dans la direction x. En d'autres termes, l'effet de rendu de Skew (45DEG) est le même que Skewx (45DEG).

Matrice de transformation de courant

Jusqu'à présent, nous avons discuté des fonctions de transformation séparément, mais ils peuvent également être combinés. Vous voulez faire évoluer et faire pivoter des objets? Pas de problème: utilisez la liste de transformation. Par exemple:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

Cela produit les résultats indiqués ci-dessous.

La séquence

est importante lors de l'utilisation des fonctions de transformation. Ceci est mieux illustré par les illustrations, alors jetons un coup d'?il à un exemple. Le CSS suivant inclinera et pivotera un élément:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

Il donne le résultat comme indiqué ci-dessous.

Que se passe-t-il si vous tournez d'abord l'élément, puis l'inclinez-le?

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

Les effets (comme indiqué ci-dessous) sont très différents.

Chaque transformation a une matrice de transformation de courant de courant différente , qui est créée dans l'ordre de ses fonctions de transformation. Pour comprendre pleinement les raisons, nous devons apprendre certains Matrice Multiplication

. Cela nous aide également à comprendre les fonctions Matrix et Matrix3D.

Fonctions de multiplication et de matrice de matrice

La matrice est un tableau de nombres ou d'expressions disposés en lignes et colonnes d'un rectangle. Toutes les transformations peuvent être représentées à l'aide d'une matrice 4 × 4 comme indiqué ci-dessous.

Cette matrice correspond à la fonction Matrix3D, qui accepte 16 paramètres, chaque paramètre correspondant à une valeur de la matrice 4 × 4. Les transformations bidimensionnelles peuvent également être représentées à l'aide d'une matrice 3 × 3, comme indiqué ci-dessous.

Cette matrice 3 × 3 correspond à la fonction de transformation de la matrice. La fonction matrix () accepte six paramètres, chacun correspondant à la valeur a à f

.

Chaque fonction de transformation peut être décrite à l'aide de fonctions matricielles et matricielles ou matrice3D. La figure ci-dessous montre la matrice 4 × 4 de la fonction SCALE3D, où sx , sy et sz sont les facteurs de mise à l'échelle des X, Y et Z Dimensions, respectivement.

Lorsque nous combinons les transformations (par exemple, transformée: échelle (2) traduire (30px, 50px)), le navigateur multiplie la matrice de chaque fonction en créant une nouvelle matrice. Cette nouvelle matrice est la matrice appliquée aux éléments.

mais la multiplication matricielle est comme ceci: elle n'est pas interchangeable. Pour des valeurs simples, le produit de 3 × 2 est le même que le produit de 2 × 3. Cependant, pour une matrice, le produit de a × b n'est pas nécessairement le même que le produit de b × a . Regardons un exemple. Nous calculerons le produit matriciel de la transformation: échelle (2) traduire (30px, 50px).

Nos éléments ont été mis à l'échelle deux fois plus à l'échelle, puis traduits à 60 pixels horizontalement et 100 pixels verticalement. Nous pouvons également utiliser la fonction matricielle pour représenter ce produit: Transform: Matrix (2, 0, 0, 2, 60, 100). Maintenant, changeons l'ordre de ces transformations, c'est-à-dire transformée: traduire (30px, 50px) échelle (2). Les résultats sont indiqués ci-dessous.

Notez que notre objet est toujours mis à l'échelle deux fois plus à l'échelle, mais ici, il se fait horizontalement par 30 pixels et verticalement de 50 pixels. En utilisant la fonction matricielle, c'est la transformée: matrice (2, 0, 0, 2, 30, 50).

Il convient également de noter que la fonction de transformation héritée est similaire à la liste de transformation. Chaque transformée d'enfant est multipliée par toute transformation appliquée à son parent. Par exemple, considérez le code suivant:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

Il s'agit du même effet de rendu que le suivant:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

Dans les deux cas, la matrice de transformation de courant de l'élément P est la même. Bien que nous nous soyons concentrés sur des transformations bidimensionnelles jusqu'à présent, ce qui précède s'applique également aux transformations tridimensionnelles. La troisième dimension ajoute l'illusion de la profondeur. Il apporte également une complexité supplémentaire sous la forme de nouvelles fonctions et propriétés.

Les questions fréquemment posées sur les fonctions de transformation bidimensionnelles dans CSS

Quels sont les différents types de fonctions de transformation bidimensionnelles dans CSS?

Il existe de nombreux types de fonctions de transformation bidimensionnelles dans CSS. Ceux-ci incluent tradlate (), rotate (), scale (), skew () et matrice (). Chaque fonction vous permet de manipuler des éléments de différentes manières. Par exemple, la fonction Translate () déplace un élément de sa position actuelle, tandis que la fonction Rotate () tourne l'élément autour d'un point donné. La fonction SCALE () modifie la taille d'un élément, et la fonction Skew () tords l'élément le long de l'axe X et de l'axe Y. La fonction matrix () combine toutes ces transformations en une seule.

Comment utiliser la fonction Translate () dans CSS?

La fonction Translate () dans CSS est utilisée pour déplacer un élément de sa position actuelle. Il a deux paramètres: la valeur de l'axe X et la valeur de l'axe y. Par exemple, si vous souhaitez déplacer l'élément 50 pixels vers la droite et 20 pixels vers le bas, vous pouvez utiliser le code suivant: Transform: tradlate (50px, 20px);. Cela déplacera l'élément vers un nouvel emplacement sans affecter la disposition d'autres éléments de la page.

Puis-je combiner plusieurs fonctions de transformation 2D dans CSS?

Oui, vous pouvez combiner plusieurs fonctions de transformation 2D dans CSS. Pour ce faire, énumérez simplement chaque fonction dans la propriété Transform et séparez-la avec des espaces. Par exemple, si vous souhaitez mettre à l'échelle un élément pour deux fois sa taille, puis le faire pivoter 45 degrés, vous pouvez utiliser le code suivant: Transformer: échelle (2) Rotation (45DEG);. Les transformations sont appliquées dans l'ordre indiqué.

Quel est le but de la fonction Matrix () dans CSS?

La fonction matricielle () dans CSS est une fonction de transformation très puissante qui vous permet d'effectuer plusieurs transformations en même temps. Il a six paramètres représentant la valeur de la matrice 2 × 3. Cette matrice est utilisée pour effectuer une combinaison de transformations de mise à l'échelle, de rotation, d'inclinaison et de traduction. Bien qu'il soit plus complexe que d'autres fonctions de transformation, il fournit un degré élevé de contr?le sur le processus de transformation.

Comment fonctionne la fonction Skew () dans CSS?

La fonction Skew () dans CSS est utilisée pour tordre les éléments le long de l'axe X et de l'axe Y. Il a deux paramètres: l'angle d'inclinaison de l'axe x et l'angle d'inclinaison de l'axe y. Par exemple, si vous souhaitez incliner l'élément 30 degrés le long de l'axe x et 20 degrés le long de l'axe Y, vous pouvez utiliser le code suivant: Transform: Skew (30Deg, 20Deg);. Cela déformera l'élément, créant un effet d'inclinaison.

Puis-je utiliser une fonction de transformation 2D pour n'importe quel élément HTML dans CSS?

Oui, vous pouvez utiliser une fonction de transformation 2D pour n'importe quel élément HTML dans CSS. Cela comprend des éléments au niveau du bloc (tels que des divs) et des éléments en ligne (tels que des portées). Cependant, n'oubliez pas que la fa?on dont la transformation est appliquée peut varier en fonction du type d'élément et de sa position dans la disposition.

Que se passe-t-il si je ne spécifie pas des unités pour la fonction Translate () dans CSS?

Si vous ne spécifiez pas d'unités pour la fonction Translate () dans CSS, ces valeurs seront traitées comme des valeurs de pixels. Cela signifie que la transformation: traduire (50, 20); Cependant, il est généralement préférable de toujours spécifier des unités pour assurer la clarté et la cohérence.

Comment animer les transformations 2D dans CSS?

Vous pouvez utiliser la propriété de transition pour animer une transformation 2D dans CSS. Cette propriété vous permet de spécifier la durée, la fonction de synchronisation et le retard de la transition. Par exemple, si vous souhaitez animer la rotation en 2 secondes, vous pouvez utiliser le code suivant: Transition: Transform 2s; Cela animera en douceur la rotation de la durée spécifiée.

Quelle est la différence entre les fonctions Rotate () et Skew () dans CSS?

Les fonctions Rotate () et Skew () dans CSS fonctionnent sur des éléments de différentes manières. La fonction Rotate () tourne les éléments autour d'un point donné, tandis que la fonction Skew () pwiste les éléments le long de l'axe x et y. Cela signifie que Rotate () modifie l'orientation de l'élément et Skew () modifie la forme de l'élément.

Puis-je utiliser des fonctions de transformation 2D avec d'autres propriétés CSS dans CSS?

Oui, vous pouvez utiliser des fonctions de transformation 2D dans CSS avec d'autres propriétés CSS. Par exemple, vous pouvez utiliser la propriété Transform en conjonction avec la propriété Border-Radius pour créer un élément rotatif avec des coins arrondis. Cependant, n'oubliez pas que l'ordre dans lequel les propriétés sont appliquées affecte le résultat final.

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!