Comment appliquer plusieurs transformations en CSS?

Les images sont essentielles pour exprimer des informations et améliorer l'apparence d'une page Web. Ces graphiques HTML sont utilisés pour créer des visuels accrocheurs, y compris des bannières publicitaires, des dessins, etc. Cependant, parfois, il est nécessaire de faire tourner ou de retourner des images sur la page pour répondre aux exigences visuelles spécifiques pour l'entreprise. À cette fin, CSS permet à ses utilisateurs d'appliquer plusieurs «transformer»Propriétés sur les éléments HTML.

Cet article démontrera:

• Comment ajouter / insérer une image dans un div?




• Comment appliquer plusieurs transformations en CSS?

Comment insérer une image dans un div?

Pour ajouter / insérer une image dans un div, essayez la procédure mentionnée.

Étape 1: Créez un conteneur div

Tout d'abord, créez un conteneur div en utilisant le «" étiqueter. Ensuite, insérez un «identifiant"Avec un nom particulier.

Étape 2: Faites un autre conteneur div

Après cela, créez un autre conteneur div. Ajoutez également un attribut de classe à l'intérieur de la balise div et spécifiez un nom de classe.

Étape 3: Ajouter l'image

Ajoutez une image en utilisant le "”Tag et ajoutez l'attribut mentionné suivant comme suit:

• "SRC”Est ​​utilisé pour ajouter le chemin de l'image à l'intérieur de l'élément.
• "hauteur»La propriété est utilisée pour spécifier la hauteur de l'élément défini.
• "largeur»La propriété définit la taille de l'élément horizontalement:

On peut observer que l'image a été ajoutée avec succès dans le conteneur:

Maintenant, évoluez vers la section suivante pour appliquer plusieurs transformations sur les images dans CSS.

Comment appliquer plusieurs transformations en CSS?

Le "transformer»La propriété dans CSS est utilisée pour modifier l'espace de coordonnées du modèle de mise en forme visuel. De plus, il est utilisé pour appliquer divers effets aux éléments choisis, tels que la rotation, la traduction et le biais. Essayez les instructions détaillées pour appliquer les nombreuses transformations de CSS.

Pour appliquer les transformations multiples de CSS, l'utilisateur doit essayer les étapes suivantes.

Étape 1: Accédez à First Div

# img-transform
Texte-aligne: Centre;

Accédez au premier conteneur Div à l'aide du sélecteur avec le nom d'identification "# img-transform". Pour ce faire, le «alignement de texte«La propriété est utilisée pour aligner le conteneur DIV en fonction de la valeur spécifique.

Étape 2: Appliquer la première transformation

Accédez au deuxième conteneur Div à l'aide du sélecteur de points et du nom de classe comme «.Premier ordre". Ensuite, appliquez le «transformer”Propriété à la classe sélectionnée:

.Premier ordre
Transformer: Rotation (90DEG) traduire (135px, 180px);

Selon l'extrait de code donné:

• Le "transformer»La propriété est utilisée pour appliquer une transformation 2D ou 3D sur un élément défini. Cette propriété permet à l'utilisateur de rotation, de mise à l'échelle, de déplacement et d'inclinaison des éléments.
• Le "tourner()«La valeur de la propriété Transform est une fonction de CSS qui fait pivoter l'élément en fonction de la valeur spécifiée.
• Le "traduire()«La méthode déplace un élément de sa position actuelle (selon les paramètres donnés pour l'axe x et l'axe y).

Sortir

Étape 3: Appliquer la deuxième transformation

Maintenant, accédez à nouveau au deuxième conteneur DIV et appliquez les propriétés mentionnées suivantes énumérées ci-dessous:

.Premier ordre
taille arrière: contenir;
Transformer: Rotation (-150DEG);
marge: 100px;

Ici:

• Le "taille de l'arrière-plan»La propriété établit l'emporte sur le comportement par défaut de carrelage de l'image et permet à l'utilisateur de choisir la taille de l'image d'arrière-plan d'un élément.

• Puis le "transformer«La propriété est utilisée pour transformer l'image en fonction de la condition.
• Suivant, "marge"Attribution de l'espace à l'extérieur de la frontière définie.

Sortir

Il s'agissait d'appliquer plusieurs transformations dans CSS.

Conclusion

Pour appliquer les transformations multiples de CSS, créez d'abord un conteneur div avec un «”Tag et ajoutez un ID à l'intérieur de la balise div. Ensuite, créez un autre conteneur Div et insérez une classe avec un nom spécifique. Après cela, accédez à Div et appliquez le «transformer«Propriété CSS et définissez la valeur«tourner (90)" degré. Ensuite, répétez à nouveau la même procédure pour appliquer l'autre transformation. Ce message a expliqué la méthode pour appliquer plusieurs transformations en CSS.