Technologie d'animation CSS3 que vous devez connaître (2)

traduire

Le nom « traduire » est un peu trompeur. Il s'agit en fait d'une méthode de positionnement d'éléments utilisant les valeurs des coordonnées X et Y.

Voici le contenu cité : #nav{ /* Cela déplacera l'élément de navigation de 10 pixels vers la gauche et de 20 pixels vers le bas */ -moz-transform : traduire (10px, 20px); -webkit-transform : traduire (10px, 20px); }

Prise en charge du navigateur

L'attribut traduire n'est actuellement pris en charge que par Firefox, Safari et Chrome et doit utiliser les préfixes privés du navigateur -moz- et -webkit-.

Fausser

L'inclinaison est également une fonction de transformation utile, qui peut incliner un objet selon un certain angle autour des axes x et y. Ceci est différent de la rotation de rotation, qui tourne uniquement sans changer la forme de l'élément. L'inclinaison modifie la forme d'un élément. Skew a deux paramètres, représentant respectivement l'inclinaison des axes x et y.

Voici le contenu cité : #nav{ /* Cela déplacera l'élément de navigation de 10 pixels vers la gauche et de 20 pixels vers le bas */ -moz-transform : inclinaison (30 deg, -10 deg) ; -webkit-transform : inclinaison (30 deg, -10 deg) ; }

Prise en charge du navigateur

L'attribut Skew n'est actuellement pris en charge que par Firefox, Safari et Chrome, et utilise également les préfixes privés du navigateur -moz- et -webkit-.

Matrice

Oui, Matrix est une matrice. Matrix est une chose très basique en mathématiques avancées, et c'est en effet une fonction très avancée dans CSS 3. CSS 3 introduit la fonction matricielle, qui peut réaliser les différents effets ci-dessus de manière très flexible. Il comporte 6 paramètres (a, b, c, d, e, f), qui est en fait une matrice 3*3 à travers laquelle les anciens paramètres sont convertis en nouvelles valeurs :

|

|

| 0 0 1 |

Si vous souhaitez étudier en profondeur, vous pouvez jeter un œil ici http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . Il s'agit d'un document pour SVG, mais le principe de la transformation matricielle est universel. .

Regardons un exemple :

Voici le contenu cité : #nav{ /* L'élément de navigation sera incliné comme le coin supérieur droit*/ -moz-transform : matrice (1, -0,2, 0, 1, 0, 0); -webkit-transform : matrice (1, -0,2, 0, 1, 0, 0); }

Prise en charge du navigateur

La bonne nouvelle est qu'IE prend en charge les filtres matriciels. Bien qu'il ne prenne pas en charge la plupart des fonctions de transformation CSS3, vous pouvez essentiellement obtenir le même effet en utilisant ce filtre. Cependant, vous devez d'abord comprendre les opérations matricielles. Webkit et Firefox (3.5+) prennent en charge cette fonctionnalité.

déformation de la chaîne

Les transformations sont souvent autonomes, mais si vous souhaitez utiliser plusieurs transformations en même temps, le code peut être rapidement intégré, notamment à l'aide d'extensions privées. Heureusement, nous avons quelques abréviations intégrées :

Voici le contenu cité : #nav{ -moz-transform : traduire (10, 25); -webkit-transform : traduire (10, 25); -moz-transform : rotation (90 degrés) ; -webkit-transform : rotation (90 degrés) ; -moz-transform : échelle (2, 1 ); -webkit-transform : échelle (2, 1 ); }

Ces transformations peuvent être enchaînées pour rendre votre code plus efficace :

Voici le contenu cité : navigation{ -moz-transform : traduire (10, 25) rotation (90 deg) échelle (2, 1 ); -webkit-transform : traduire (10, 25) rotation (90 degrés) échelle (2, 1 ); }

Le véritable pouvoir de ces propriétés est combiné. Vous pouvez déplacer, faire pivoter, mettre à l'échelle et contrôler tous les éléments en ligne et au niveau du bloc sans utiliser JavaScript. Une fois que la prise en charge de ces propriétés sera plus répandue, nous pourrons créer des interfaces et des applications plus riches et plus légères.

transformation-origine

transform-origin n'est pas une sous-fonction de transform, mais elle est très étroitement liée à transform. Il peut être utilisé pour spécifier le point de départ de la transformation. Par exemple, le point de départ par défaut de la transformation de rotation est le milieu. Vous pouvez définir le point de départ dans le coin supérieur gauche ou dans le coin inférieur gauche, de sorte que les résultats de. la transformation de rotation peut être très différente.

transform-origin accepte deux paramètres, qui peuvent être des valeurs spécifiques telles que pourcentage, em, px, etc., ou des paramètres descriptifs tels que gauche, centre, droite ou haut, milieu, bas, etc. Quelques exemples :

Voici le contenu cité : .class1{-moz-transform-origin : 0 0 ; -webkit-transform-origine : 0 0 ; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin : 100 % 100 % ; ...} .class3{-moz-transform-origin : en haut à gauche ; -webkit-transform-origin : en haut à gauche ; ...}

Compatibilité du navigateur

Cet attribut n'est actuellement pris en charge que par webkit et Firefox et nécessite l'ajout de leur propre préfixe privé.