CSS3 2D Transformation

CSS3 2La fonction de transformation D permet de2Transformation de l'élément dans l'espace D

de l'élément2Transformation D

Utilisation de CSS3 2Fonction de transformation D, vous pouvez effectuer des opérations de transformation de base sur les éléments dans l'espace bidimensionnel, par exemple le déplacement, la rotation, le redimensionnement et l'inclinaison.

Les éléments transformés n'affectent pas les éléments environnants, mais peuvent être superposés comme les éléments positionnés en absolu. Cependant, les éléments transformés occupent toujours de l'espace dans le layout à leur position par défaut (non transformés).

Utilisation des transformations CSS et des fonctions de transformation

CSS3 L'attribut transform utilise les fonctions de transformation pour manipuler le système de coordonnées utilisé par l'élément, afin d'appliquer les effets de transformation.

La partie suivante décrit ces fonctions de conversion :

Fonction translate()

Déplacer l'élément de sa position actuelle à une nouvelle position le long des axes X et Y. Cela peut être écrit sous forme de translate(tx, ty). Si ty n'est pas spécifié, sa valeur est considérée comme zéro.

img {
　　　　-webkit-transform: translate(200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px);　　　　　　
}

translate(200px, 50px) cette fonction déplace l'image le long de l'axe x dans le sens positif20 pixels, et se déplace verticalement le long de l'axe y50 pixels.}

La fonction rotate()

La fonction rotate() tourne l'élément autour de son origine (spécifiée par le transform-L'attribut d'origine spécifie) tourne l'élément d'un angle spécifié. Il peut être écrit sous forme de rotate(a).

img {
　　　　-webkit-transform: rotate(30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: rotate(30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: rotate(30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

rotate(3(0deg) Cette fonction fait tourner l'image autour de son origine dans le sens horaire30 degrés. Vous pouvez également utiliser des valeurs négatives pour faire tourner l'élément dans le sens inverse des aiguilles d'une montre.

La fonction scale()

La fonction scale() augmente ou diminue la taille de l'élément. Elle peut être écrite sous forme de scale(sx, sy). Si sy n'est pas spécifié, elle est considérée comme égale à sx.

img {
　　　　-webkit-transform: scale(1.5);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: scale(1.5);　　/*　Firefox　*/
　　　　　　　　-ms-transform: scale(1.5);　　/*　IE　9　*/
　　　　　　　　　　　　transform: scale(1.5);　　/*　Navigateurs modernes　*/　　　　
}

scale(1.5) fonctionne en réduisant ou en augmentant la largeur et la hauteur de l'image à la taille originale1.5fois. La fonction scale(1) ou scale(1,1) n'a pas d'effet sur l'élément.

La fonction skew()

La fonction skew() fait pencher l'élément le long des axes X et Y d'un angle spécifié. Elle peut être écrite sous forme de skew(ax, ay). Si ay n'est pas spécifié, elle est considérée comme zéro.

img {
　　　　-webkit-transform: skew(-40deg,　15(deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: skew(-40deg,　15(deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: skew(-40deg,　15(deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: skew(-40deg,　15(deg);　　/*　Navigateurs modernes　*/　　　　
}

La fonction skew(-40deg, 15(deg) qui fait pencher l'élément le long de l'axe X.-40 degrés et rend l'axe Y vertical.15degrés.

La fonction matrix()

La fonction matrix() peut exécuter tous2Transformations D, telles que les translations, les rotations, les mises à l'échelle et les déformations. Elle prendmatriceSous forme de six paramètres, elle peut être écrite sous forme de matrix(a, b, c, d, e, f). La section suivante vous montrera comment l'utiliser pour représenter chaque2Fonction de transformation D matrix().

• translate(tx, ty) = matrice(1, 0, 0, 1, tx, ty); — où tx et ty sont les valeurs de déplacement horizontaux et verticaux.

• rotate(a) = matrice(cos(a), sin(a), -sin(a), cos(a), 0, 0); — où a est en degrés. Vous pouvez échanger sin(a) et-La valeur de sin(a) inverse la rotation. Vous pouvez effectuer une rotation maximale de360 degrés.

• scale(sx, sy) = matrice(sx, 0, 0, sy, 0, 0); — où sx et sy sont les proportions de mise à l'échelle horizontale et verticale.

• skew(ax, ay) = matrice(1, tan(ay), tan(ay), 1, 0, 0); — où ax et ay sont les valeurs horizontales et verticales en degrés.

Ceci est une exécution de la fonction matrix()2Exemple de transformation D.

img {
　　　　-webkit-transform: matrice(0,　-1,　1, 0,　200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: matrice(0,　-1,　1, 0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: matrice(0,　-1,　1, 0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: matrice(0,　-1,　1, 0,　200px,　50px);　　
}

Cependant, lorsque plusieurs transformations sont exécutées en une seule fois, il est plus pratique d'utiliser une seule fonction de transformation et de les lister par ordre, comme suit :

img {
　　　　-webkit-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　　　　　
}

2Fonctions de transformation D

Le tableau suivant résume brièvement toutes2Fonction de transformation D