CSS tourne le fond
Exemple # 01:
Commençons par ce script HTML avec la balise de base HTML simple suivie par la balise de tête utilisée pour titre la page Web via sa balise "Title". Le corps de la balise HTML a été couvert de différents éléments comme Div et Étiquettes. Nous avons deux principaux éléments div dans ce script HTML. Dans les deux éléments div principaux, nous avons également deux étiquettes «div» enfants qui sont spécifiées par deux classes différentes A, et b. Les deux balises div intérieures utilisent l'élément «étiquette» pour étiqueter un texte dans le «div» et spécifier le div comme normal ou tourné. Les deux étiquettes ont obtenu la bordure de 1px en style en pointillé tandis que la première étiquette Div serait bleue et la seconde serait rouge.
Lorsque nous jetons un coup d'œil à la balise de style, nous avons appris que les deux sections intérieures «div» sont conçues séparément en utilisant leurs classes respectives: A et B. Les deux éléments div utilisent la même image d'arrière-plan du système sans répétition d'arrière-plan, même hauteur et même largeur: 120px et 30px. Tandis que la deuxième div intérieure contiendrait également du style supplémentaire. Nous avons utilisé la propriété de marge pour placer cette section div 100px loin du haut de la page HTML et l'a fait tourner à 90 degrés à droite en utilisant la propriété Transform.
Après cela, nous l'avons tourné à 45 degrés dans la direction opposée à partir de l'endroit où il a commencé. Enregistrons et exécutons ce script maintenant.
La sortie ci-dessous montre une représentation claire du code HTML ci-dessus. La première section Div contient une image avec une étiquette sans aucune rotation et aucun arrière-plan n'a été répété. L'autre section DIV contenait une image et l'étiquette alors qu'elle a été tournée à 90 degrés d'abord, puis a biaisé, traduit et élargissant à 45 degrés vers sa position d'origine.
Exemple # 02:
Dans l'exemple ci-dessus, nous avons tourné les sections div avec leurs images d'arrière-plan et les étiquettes qu'ils contiennent. Maintenant, nous examinerons l'utilisation de différentes propriétés pour faire pivoter l'image d'arrière-plan avec et sans son texte sur la page HTML. Le corps de cette page HTML a été rempli d'un cap des sections Div différentes de taille 1 et 4 avec quelques textes. Tous ces 4 Divs ont été spécifiés avec différents ID et classes pour les styliser séparément: ID «RotateImageOnly» pour la première classe div, «Rotate» pour la deuxième classe div, «RotateTranslate» pour la troisième section div et «Translaterotate» classe pour la quatrième section div. Dans l'élément de balise de style, nous utilisons l'élément div dans le même style pour les 4 éléments pour certaines propriétés. Ainsi, nous avons spécifié la position absolue, un rembourrage gauche 40px, un rembourrage supérieur de 100px, une largeur et une hauteur de 100px pour tous, et l'image d'arrière-plan serait la même pour tous.
Alors que nous utilisons l'ID de la première div de cette balise de style pour changer sa position en relative, modifier la largeur et la hauteur, et les marges gauche. L'image d'arrière-plan du premier div ne serait pas remplacée et l'ancienne serait utilisée. L'image d'arrière-plan de cette section Div sera tournée à 45 degrés sans traduire ni faire tourner son texte. Après cela, les trois sections div l'emporteraient sur la nouvelle image d'arrière-plan.
La deuxième section Div a été décrite 2px en pointillés, tourné à 45 degrés, son texte sera également traduit par 200 pixels. La troisième image d'arrière-plan de la section Div a été tournée à 90 degrés avec son texte tandis que la 4ème section div a été tournée de 180px avec son texte.
La sortie de ce script HTML a montré un total de 4 divs avec des images d'arrière-plan. Le premier div a utilisé les différentes images d'arrière-plan tandis que les autres remplacent les nouvelles images. L'image d'arrière-plan de la première section div a été tournée à 45 degrés tandis que son texte n'a pas été tourné.
L'image d'arrière-plan pour le deuxième div a tourné à 45 degrés tandis que son texte a été traduit en 200 pixels. L'image d'arrière-plan de la troisième section div a été tournée à 90 degrés avec son texte. Juste comme ça, l'image d'arrière-plan de la quatrième section a été tournée à 180 degrés et son texte a été traduit à 180 pixels.
Exemple # 03:
Commençons par le dernier exemple de cet article pour utiliser certaines propriétés de CSS sur les images d'arrière-plan de certains éléments de la page Web HTML. Nous allons d'abord examiner le corps de la page HTML. Dans la balise corporelle pour cette page HTML, nous avons utilisé le seul cap de la taille 1. Il ne reste plus rien à faire sur la balise du corps, donc nous allons jeter un œil à la balise de style de la page HTML. Dans l'étiquette de tête du code HTML, il y a une balise de titre qui a été utilisée pour le titre comme «transformation d'image d'arrière-plan».
Cette balise de style a été lancée avec l'utilisation d'éléments corporels. Pour le style, nous utilisons l'image d'arrière-plan de propriété pour ajouter l'image en arrière-plan. Nous avons définis l'arrière-plan sur sans répétition afin que l'image d'arrière-plan ne puisse pas être répétée sur la page Web HTML. De plus, la propriété de l'attachement d'arrière-plan est utilisée pour corriger l'image d'arrière-plan et le super-flux de texte a été utilisé pour hériter des propriétés globales du contenu tout au long de la page. Un autre élément corporel a été utilisé avec l'attribut After pour créer une autre image d'arrière-plan avec position absolue: marges supérieures de 10%, marge gauche de 30%, largeur et hauteur de 300 pixels avec la même image d'arrière-plan contenant l'opacité de 0.5.
Le rayon de la frontière de cette image a été fixé à 50%. Cela signifie que cette image sera affichée en cercle. De plus, son image d'arrière-plan sera tournée de 45 degrés et aucune propriété de répétition d'arrière-plan n'a été appliquée afin que l'image puisse être répétée plusieurs fois.
La sortie affiche la première image d'arrière-plan affichée simplement sans aucune rotation, sans aucune traduction, et sans répéter. Tandis que la deuxième image d'arrière-plan a été tournée de 45 degrés avec un rayon de 50% et que l'image d'arrière-plan est répétée plusieurs fois comme indiqué dans l'image ci-dessous.
Conclusion
Cet article constitue l'utilisation de différentes propriétés CSS pour faire tourner les images d'arrière-plan de toute page HTML à certains degrés. Des exemples HTML ont été essayés d'utiliser ces propriétés intéressantes du CSS d'une manière très simple et unique. Pour ces exemples, nous avons utilisé la propriété d'image d'arrière-plan, la propriété de répétition d'arrière-plan, la propriété d'attachement d'arrière-plan, la propriété de superficie, le contenu, la position, la propriété Border-Radius, la transformation, l'opacité et les différentes propriétés de largeur / hauteur pour réaliser les propriétés Sortie requise pour faire tourner l'arrière-plan.