Comment puis-je faire pivoter une image dans un bouton de la barre de défilement CSS sans faire pivoter le bouton lui-même ?

Rotation des images d'arrière-plan dans les barres de défilement CSS : une énigme de rotation résolue

Question :

Dans En tentant de faire pivoter une image dans un bouton de la barre de défilement Chrome, un développeur a rencontré un défi. Alors que la propriété -webkit-transform réussit à faire pivoter l'intégralité du bouton, y compris son contenu, ils ont cherché une solution pour faire pivoter l'image seule.

Réponse :

La solution réside en exploitant le pseudo-élément :before, qui crée un élément supplémentaire à l'intérieur de l'élément d'origine. En positionnant le pseudo-élément de manière absolue, en définissant ses dimensions et en le positionnant par rapport à l'élément parent, il devient un "calque" distinct.

Extrait de code CSS :

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

Dans ce extrait, l'image d'arrière-plan est définie dans le pseudo-élément et pivotée à l'aide de la propriété transform. Le z-index garantit que la couche d'image reste derrière le contenu de l'élément principal. En ajustant les propriétés haut et gauche, l'image peut être positionnée dans l'élément pour pivoter autour de son centre préféré.

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!