Introduction détaillée aux propriétés de rotation d'arrière-plan CSS

CSS est désormais l'une des technologies frontales les plus courantes, et c'est également la première étape pour de nombreuses personnes pour apprendre la technologie front-end. La rotation de l'arrière-plan CSS est également un attribut important dans CSS, qui peut rendre les pages Web plus vivantes et tridimensionnelles. Ensuite, nous présenterons en détail la propriété CSS de rotation d’arrière-plan.

1. Qu'est-ce que la rotation d'arrière-plan CSS ?

La rotation de l'arrière-plan CSS fait référence à la rotation de l'arrière-plan via l'attribut transform en CSS. Lorsque nous définissons l'angle de rotation et le point central de rotation, l'image d'arrière-plan peut être pivotée selon les paramètres définis pour obtenir l'effet souhaité.

2. Comment utiliser la rotation d'arrière-plan CSS

L'utilisation de la rotation d'arrière-plan CSS est très simple. Il vous suffit de définir les attributs d'image d'arrière-plan et de transformation et de définir les valeurs correspondantes.

L'exemple de code est le suivant :

div{
    background-image: url(图片地址);
    transform: rotate(45deg);
}

Dans le code ci-dessus, nous avons profité de l'élément "div" et y avons ajouté les attributs background-image et transform. Parmi eux, l'attribut background-image spécifie l'adresse de l'image d'arrière-plan à utiliser et l'attribut transform définit l'angle de rotation.

3. Valeurs d'attribut communes​​de la rotation de l'arrière-plan CSS

En CSS, nous pouvons ajuster l'effet de rotation de l'arrière-plan CSS en modifiant la valeur de l'attribut de transformation. Voici quelques valeurs d'attribut de rotation d'arrière-plan CSS courantes :

1.rotate(deg) : faites pivoter l'angle en degrés.

2.rotateX(deg) : faites pivoter l'élément entier le long de l'axe X de degrés.

3.rotateY(deg) : faites pivoter l'élément entier le long de l'axe Y de degrés.

4.rotateZ(deg) : faites pivoter l'élément entier le long de l'axe Z de degrés.

5.rotate3d(x,y,z,deg) : faites pivoter l'élément entier en 3D de degrés.

4. Exemple d'application de rotation d'arrière-plan CSS

1. Exemple d'animation de rotation d'arrière-plan simple

Dans l'exemple suivant, nous avons configuré un élément "div" et utilisé la rotation d'arrière-plan CSS pour implémenter des effets d'animation de rotation d'arrière-plan simples. Le code est le suivant :

div{
    width: 200px;
    height: 200px;
    background-image: url(图片地址);
    animation: rotate 3s ease-in-out infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Dans ce code, nous avons ajouté les attributs width, height et background-image à l'élément "div" et défini respectivement sa largeur, sa hauteur et son image d'arrière-plan. En termes d'effets d'animation, nous avons utilisé le mot-clé @keyframes en CSS3 pour créer une animation de rotation d'arrière-plan appelée « rotate » afin d'obtenir l'effet dynamique des éléments de la page Web.

2. Utilisez la rotation d'arrière-plan CSS pour réaliser l'image « amour »

Ci-dessous, nous montrons un exemple d'utilisation de la rotation d'arrière-plan CSS pour réaliser l'image « amour ». Le code est le suivant :

div{
    width: 150px;
    height: 150px;
    background-image: url(图片地址);
    transform: rotate(-45deg);
    position: relative;
}

div:after{
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 75px;
    background-image: url(图片地址);
    transform: rotate(45deg);
}

Dans le code ci-dessus, nous définissons l'attribut background-image pour l'élément parent "div" et l'élément enfant "div:after", et utilisons l'attribut transform pour les faire pivoter en conséquence, obtenant ainsi " Effet d'image "Amour". Dans le même temps, en raison du réglage de la position de positionnement et de l'angle de rotation de l'élément enfant "div:after", nous avons également réalisé le recadrage de l'image d'arrière-plan de l'élément parent "div".

Résumé

Ce qui précède est une introduction détaillée à l'attribut CSS de rotation d'arrière-plan. En étudiant cet attribut, nous pouvons avoir une compréhension plus approfondie de l'attribut transform dans la technologie CSS et utiliser la technologie CSS plus habilement pour créer des éléments de page Web plus vivants et tridimensionnels.

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!