Regard sur les transformations 2D de CSS3
le Module de transformation est un ajout formidable dans CSS3, il prend la manière dont nous manipulons les éléments sur un site Web au prochain niveau.
Certaines expériences me surprennent vraiment, des exemples comme celui-ci. Cependant, nous n'allons pas créer quelque chose comme une icône exclusivement CSS qui puisse se transformer en un autobot, car cela peut être écrasant et pas tout à fait utilisable dans la vie réelle.
Au lieu de cela, cette fois, nous allons revenir en arrière et examiner les bases des transformations 2D CSS3 pour voir comment cela fonctionne à un niveau fondamental..
La syntaxe
Le module de transformation CSS3 nous permet fondamentalement de transformer un élément dans une certaine mesure, tel que la traduction, la mise à l'échelle, la rotation et l'inclinaison.
La syntaxe officielle est transform: méthode (valeur). Cependant, comme pour tous les autres ajouts remarquables de CSS3 qui en sont encore à leurs débuts, les navigateurs actuels ont toujours besoin de la version de syntaxe pour exécuter les transformations. Donc, la syntaxe complète deviendrait comme ceci:
transformer: méthode (valeur); / * Syntaxe officielle du W3C * / / -o-transform: méthode (valeur); / * Opera 10.5+ * / -ms-transform: méthode (valeur); / * Internet Explorer 9.0+ * / -moz-transform: méthode (valeur); / * Firefox 3.6+ * / -webkit-transform: méthode (valeur); / * Chrome / Safari 3.2+ * /
En outre, la méthode à laquelle nous faisons référence ci-dessus est la fonctions de transformation, qui pourrait être remplacé par l'un des suivants: Traduire(), échelle(), tourner() ou fausser().
La valeur
La plupart de la valeur de la méthode correspondra à la Axe X et Axe Y. Si vous vous souvenez du système de coordonnées cartésiennes de votre classe de mathématiques au lycée, le principe de base est assez similaire, l'axe des X représente le horizontal la ligne et l'axe des ordonnées représente le verticale ligne.
Sauf pour les rotations. le rotation utilisera le coordonnées polaires qui est exprimé en degrés allant de 0 à 360.
Les valeurs pour toutes les méthodes peuvent être négatives ou positives. Notez toutefois que la page Web est lue de manière séquentielle de haut en bas, ce qui fait que l’axe Y du Web fonctionne de façon opposée au principe original des coordonnées cartésiennes. Cela signifie que lorsque vous ajoutez une valeur négative à Axe Y, il ira au sommet à la place.
Utiliser les transformations
Voyons maintenant la démonstration de base suivante pour voir la transformation en action.
Je traduis
Ne soyez pas embrouillé avec le terme Traduire, il ne traduira pas la langue étrangère. le Traduire voici en fait une méthode pour déplacer des éléments dans une direction.
La méthode contient deux valeurs; X et Y. la Valeur X comme nous l'avons indiqué ci-dessus, l'élément sera pris horizontalement; à gauche ou à droite, tandis que le Y la valeur va le prendre verticalement le bas ou vers le haut.
Voyons maintenant quelques démonstrations simples:
div width: 100px; hauteur: 100px; transformer: traduire (100px, 250px);
L'extrait ci-dessus déplace l'élément de 100 pixels vers la droite et de 250 pixels vers le bas..
div width: 100px; hauteur: 100px; transformer: traduire (100px, 0);
L'extrait ci-dessus déplacera l'élément tout à droite pour 100 pixels, car nous mettons à zéro l'axe des ordonnées. Ensuite, si nous voulons déplacer l'élément vers la gauche, il suffit de définir l'axe des abscisses en négatif, comme suit:
div width: 100px; hauteur: 100px; transformer: traduire (-100px, 0);
- Démo "Traduire"
Alternativement, nous sommes en mesure de déplacer l'élément dans une seule direction avec ces méthodes individuelles; translateX () et traduireY (), la différence est que chacune de ces méthodes n'accepte qu'une valeur.
Donc, pratiquement parlant, le transformer: traduire (-100px, 0) est également égal à transformer: translateX (-100px).
II - échelle
le échelle méthode nous permet de agrandir ou réduire les éléments de sa taille réelle. La valeur de l'échelle est la même que celle du Traduire méthode ci-dessus, il contient également X et Y. La seule différence est que nous ne spécifions pas l'unité. Voici un exemple:
div width: 100px; hauteur: 100px; transformer: échelle (1,5);
L’exemple ci-dessus agrandira le div 1.5 ou 150% de sa taille réelle, et comme nous l’adaptons également pour les directions X et Y, nous n’avons qu’à le déclarer dans une valeur. Vous pouvez aussi le déclarer de cette façon transformée: échelle (1,5,1,5); si vous voulez aller plus en détail, il va juste faire la même chose.
De plus, si nous voulons réduire l'élément, nous utiliserons spécifiquement une valeur de 0,999 à 0 absolu, comme dans l'exemple ci-dessous, ce qui réduira la taille de la div de 50% ou de la moitié:
div width: 100px; hauteur: 100px; transformer: échelle (0,5);
Mais soyez prudent, si vous définissez la valeur sur absolue “0” la div disparaîtra, donc à moins que vous n'ayez une raison valable de le faire, je ne recommanderais pas de le faire.
- Démo "Scale"
III - Rotation
Comme nous l'avons mentionné plus tôt dans cet article, le tourner méthode utilise des coordonnées polaires, la valeur est donc exprimée en degrés. Voici deux exemples
L'extrait ci-dessous fera pivoter le div 30 degrés dans le sens des aiguilles d'une montre.
div width: 100px; hauteur: 100px; transformer: faire pivoter (30 °);
Une valeur négative, comme illustré dans l'exemple ci-dessous, fera pivoter le div dans le sens opposé (sens anti-horaire) au même degré.
div width: 100px; hauteur: 100px; transformer: faire pivoter (-30 ° C);
- Démo "Rotation"
IV - Inclinaison
le fausser Cette méthode nous permet de créer une sorte de parallélogramme. Il contient également deux valeurs des axes X et Y. Cependant, la valeur elle-même est indiquée en degrés, au lieu des mesures linéaires comme celles que nous utilisons pour le échelle ou la Traduire méthode. Voici un exemple:
div width: 200px; hauteur: 100px; transformer: inclinaison (30 °, 10 °);
- Démo "Skew"
V - Méthode multiple
le transformer La propriété n'est pas limitée à gérer une seule méthode, en fait, nous pouvons inclure plusieurs méthodes dans des déclarations uniques, comme ceci:
div width: 100px; hauteur: 100px; transformer: traduireX (100px) tourner (45deg);
L'extrait ci-dessus déplacera l'élément 100px vers la droite et en même temps, il pivotera de 45 degrés.
Démo "Méthode multiple".
Transformer l'origine
le origine d'origine - comme son nom l'indique - est utilisé pour contrôler le point de départ de la transformation. Si nous ne déclarons pas explicitement cette propriété avec la syntaxe suivante origine de la transformation: X Y;, alors le navigateur prendra la valeur par défaut qui est 50% pour le X et 50% pour le Y.
Maintenant, si nous spécifions le transformer-origine à 0 (X) 0 (Y) la transformation commencera en haut à gauche.
Encore une fois, tous les navigateurs ont encore besoin de la version du préfixe pour appeler cette propriété. Donc, voici la version complète pour vous assurer que cela fonctionne dans la plupart des navigateurs actuels:
-webkit-transformation-origin: X Y; -moz-transform-origin: X Y; -o-transformation-origine: X Y; -ms-transform-origin: X Y; origine de la transformation: X Y;
- Démo "Transform-origin"
Conclusion
Nous avons traversé les quatre méthodes de transformation essentielles; traduire, redimensionner, faire pivoter et incliner
Cependant, comme mentionné, ce module en est encore à ses débuts. Si vous appliquez ces méthodes à votre prochain site Web, assurez-vous qu'il se dégrade gracieusement pour les navigateurs incompatibles (je ne fais pas référence à IE6 ici)..
Enfin, vous pouvez voir toute la démo ou télécharger le code source à partir des liens suivants.
- Démo
- Source de téléchargement
