Comment transformer des objets avec CSS3

En CSS3, une transformer modifie l'apparence des objets à l'écran d'une manière spécifique. Par exemple, vous pourriez faire pivoter l'objet ou de fausser ses dimensions. Transforme le rendent facile à créer des présentations uniques à partir d'objets ordinaires - effets qui habituellement vous auriez besoin d'un designer ou un artiste graphique pour créer pour vous. La liste suivante décrit les types de transformations que vous pouvez effectuer.

• la matrice (a, b, c, d, tx, ty): Incline l'objet en utilisant une matrice définie par les points a, b, c et d. Il traduit alors la position de l'objet à l'écran par une valeur désignée par tx et ty. (Vous pouvez essayer la matrice () transformer sur au w3schools.com.)

  Il existe des versions de plusieurs de ces fonctions qui fonctionnent sur des objets en trois dimensions. Par exemple, il existe une fonction matrix3d ​​(). Ces fonctions ajoutent une z-axe à l'équation, de sorte que vous pouvez manipuler des objets en trois dimensions dans l'espace en trois dimensions. Vous pouvez en savoir plus sur la façon dont les versions 3D travaillent à Mozilla Developer Network et CSS-Tricks.

• traduire (tx, ty), translateX (tx), translateY (ty): modifie la position de l'objet sur l'écran d'un montant horizontal défini par tx, un montant vertical défini par Ty, ou les deux. (Vous pouvez essayer le traduire () transformer au w3schools.com.)

• échelle (x, y), scaleX (x), scaleY (y): Étire l'objet horizontalement par le montant spécifié par x, verticalement par le montant indiqué par y, ou les deux. (Vous pouvez essayer de l'échelle () transformer au w3schools.com.)

• rotate (angle), rotateX (angle), rotateY (angle): fait pivoter l'objet par le nombre de degrés spécifiés dans l'axe souhaité. (Vous pouvez essayer le rotate () transformer au w3schools.com.)

  Internet Explorer ne supporte pas toutes les transformations. Par exemple, vous verrez que Internet Explorer 9 ne supporte pas les rotateX () et rotateY () fonctions.

• obliquité (angleX, Angley), skewX (angleX), skewY (Angley): Incline l'objet par le nombre de degrés horizontalement spécifiées par angleX, le nombre de degrés spécifié verticalement par Angley, ou les deux. (Vous pouvez essayer l'inclinaison () transformer au w3schools.com.)

La meilleure façon de comprendre ces transformations est de les voir en action. La procédure suivante vous permet de créer une application exemple qui illustre les transformations que vous pouvez effectuer.

1. Créer un nouveau fichier de HTML5 avec votre éditeur de texte.

2. 
   
   
   
   

   Tapez le code suivant pour la page HTML.

   Matrice
   Traduire
   Échelle
   Rotation
   Rotation Y
   Inclinaison

   L'exemple démontre les transformations inscrites comme paragraphes. Vous pouvez essayer d'autres transformations en modifiant l'exemple (une bonne idée).

3. Enregistrez le fichier sous Transforms.HTML.

4. Créer un nouveau fichier CSS avec votre éditeur de texte.

5. Tapez les informations de style CSS suivante.

   #Matrix {Border: solid-bordure de couleur: Noir-border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur: 40px; transformer: matrice (0.866,0.5,0.4,0.866,5 , 15) - ms-transforment: matrice (0.866,0.5,0.4,0.866,5,15) - webkit-transform: matrice (0.866,0.5,0.4,0.866,5,15) -} # Traduire {border: -bordure de couleur solide: Black-border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur: 40px; transformer: traduire (20px, 30px) - ms-transform: traduire (20px, 30px) - webkit-transform: traduire (20px, 30px) -} {# Échelle border: solid-bordure de couleur: Noir-border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur : 40px; transformer: échelle (1,6, 0,75) - ms-transform: échelle (1,6, 0,75) - webkit-transform: scale (1,6, 0,75) - Rotation} # {border: couleur unie-frontière: Black border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur: 40px; transformer: rotate (140deg) - ms-transform: rotate (140deg) - webkit-transform: rotate (140deg) -} {# RotateY border: solid-bordure de couleur: Noir-border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur: 40px; transformer: rotateY (140deg) - Mme transforment- : rotateY (140deg) - webkit-transform: rotateY (140deg) -} {# Inclinaison border: solid-bordure de couleur: Noir-border-width: mince font-size: 30px; margin: 50px; largeur: 140px; hauteur: 40px; transformer: obliquité (15deg, 30deg) - ms-transform: obliquité (15deg, 30deg) - webkit-transform: obliquité (15deg, 30deg) -}

   Chacune de ces transformations utilise exactement le même format de paragraphe afin que vous puissiez mieux comprendre comment ils fonctionnent. L'utilisation d'une frontière, il est plus facile de comprendre la transformation car la combinaison des mots et un objet à l'écran transmettent plus d'informations (quelque chose à retenir lorsque vous créez vos propres applications de test).

   Les transformations sont considérées comme expérimentales, même si elles apparaissent dans le cadre de la spécification. Afin de les utiliser avec Internet Explorer 9+, vous devez inclure le préfixe -ms-. Les deux Safari et Chrome nécessitent le préfixe -webkit-. Ceci est la raison pour laquelle vous voyez chaque transformée listé trois fois. Les transformations devraient également travailler à la fois avec Opera et Firefox sans aucun problème.

6. Enregistrez le fichier sous Transforms.CSS.

7. Chargez l'exemple Transforms.

   Vous voyez les effets de transformation. Toutes ces transformations sont en utilisant la même police, taille de la police, et la taille de la boîte, de sorte que les différences que vous voyez sont uniquement dues à la transformation en cours. Notez que la transformation rotateY () montre effectivement le texte en arrière.

   

   Essayez de modifier les valeurs de transformation de voir comment les changements affectent la sortie. Vous serez surpris de voir à quel point ces fonctions sont flexibles.

Il est possible de combiner des transformations pour créer des effets encore plus inhabituelles. Il suffit de les séparer par un espace. Par exemple, pour combiner une rotation () avec une inclinaison (), vous taperiez transform: tourner (25deg) obliquité (15deg, 30deg) -.