Comment faire pivoter l'arrière-plan avec CSS

CSS Rotated Background

CSS (Cascading Style Sheets) est une technologie largement utilisée pour contrôler l'apparence et la mise en page des pages Web. Vous pouvez utiliser CSS pour contrôler l'arrière-plan, y compris la couleur, l'image et le positionnement. Cependant, CSS possède également une fonctionnalité intéressante, à savoir que vous pouvez faire pivoter l’arrière-plan pour ajouter une apparence unique au site Web.

L'idée de base de la rotation de l'arrière-plan est d'utiliser la propriété transform de CSS3. Cet attribut permet aux développeurs de transformer des éléments en spécifiant leur transformation matricielle en deux ou trois dimensions. En utilisant la fonction rotate(), nous pouvons faire pivoter l’objet. Nous pouvons également utiliser la fonction translate() pour définir les coordonnées x et y de l'objet.

Examinons quelques exemples ci-dessous pour montrer comment faire pivoter un arrière-plan à l'aide de CSS.

Exemple 1 : faire pivoter un arrière-plan de couleur unie à l'aide de CSS

Tout d'abord, voyons comment faire pivoter un arrière-plan de couleur unie à l'aide de CSS. Nous pouvons le faire avec le code CSS suivant :

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

Dans cet exemple, l'élément div a la même hauteur et la même largeur que la taille de la fenêtre d'affichage. La couleur d'arrière-plan est orange. La position est relative au flux du document. En utilisant l'attribut transform et la fonction rotate(), nous pouvons faire pivoter l'arrière-plan de 30 degrés pour lui donner un effet incliné sur la page. Nous définissons également la propriété transform-origin pour que la rotation se produise autour du point central.

Exemple 2 : Faire pivoter l'arrière-plan de l'image à l'aide de CSS

Nous pouvons utiliser la même technique pour faire pivoter l'arrière-plan de l'image. Voici un exemple qui montre comment faire pivoter une image d'arrière-plan à l'aide de CSS :

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

Dans cet exemple, nous utilisons un élément div avec une image d'arrière-plan. Nous définissons la propriété background-size:cover pour adapter l'image d'arrière-plan afin qu'elle pivote sans aucune troncature. Nous masquons également l’image d’arrière-plan en utilisant l’attribut overflow: Hidden.

Ensuite, nous utilisons le pseudo-élément :before pour créer une image d'arrière-plan de la même taille, puis nous la faisons pivoter de 30 degrés et utilisons l'attribut z-index pour la placer sous l'arrière-plan. En définissant les propriétés top: -50% et left: -50%, sa position est relative au point central de l'élément div parent.

Exemple 3 : Faire pivoter l'arrière-plan du texte à l'aide de CSS

Nous pouvons également utiliser CSS pour faire pivoter le texte en arrière-plan. Voici un exemple qui montre comment faire pivoter un arrière-plan de texte en utilisant CSS :

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Dans cet exemple, nous utilisons un élément div avec du texte et le plaçons sur un pseudo-élément :before avec la même position et la même taille. Nous faisons pivoter le pseudo-élément :before de 30 degrés à l'aide de l'attribut transform:rotate(30deg) et définissons sa couleur sur orange.

Ensuite, nous utilisons l'attribut transform: rotate(-30deg) pour faire pivoter le texte de 30 degrés et l'aligner avec l'élément div parent en définissant la position : absolue, haut : 50 % et gauche : 50 % centre. Enfin, utilisez l'attribut translation(-50%, -50%) pour le centrer.

Résumé

L'arrière-plan rotatif CSS est un effet sympa qui peut être utilisé pour rendre un site Web plus intéressant et attrayant. Dans cet article, nous avons utilisé des exemples d'arrière-plans de couleur unie, d'arrière-plans d'images et d'arrière-plans de texte pour montrer comment faire pivoter un arrière-plan à l'aide de CSS. La propriété transform:rotate() que nous avons utilisée dans la démo est très pratique pour faire pivoter l'arrière-plan en spécifiant le degré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!