background image rotation mais que l'image

Version imprimable

16/11/2020, 15h13
Speed41

background image rotation mais que l'image

Bonjour,

Je voudrais pouvoir faire pivoter l'image d'un background mais pas son conteneur

Code:

transform: rotate(90deg);

Fait tout pivoter et ce n'est pas ce que je recherche.

Je ne peux pas faire pivoter l'image (disons le fichier) car sur une même page je peux avoir le même background image mais pas dans le même sens

Si quelqu'un a une idée je suis preneur (si c'est possible)
16/11/2020, 18h05
NoSmoking

Bonjour,
passe par un pseudo-élément before par exemple.
17/11/2020, 07h33
Speed41
Merci pour ta réponse.

Je viens de tester ça
Code:

1 2 3 4 5 .rotation90::before { background-image: ; -webkit-transform: rotate(90deg); }
Je n'ai plus de rotation, peut être que je ne l'utilise pas correctement

Euh !!! c'est un peu léger pour faire apparaître ton pseudo-élément ::before.

exemple pour test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.cadre {
    width: 30em;
    height: 20em;
    border: 1px solid #069;
    margin: 5em auto;
    background-color: #FFF;
    overflow: hidden;
}
.cadre::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("http://club.developpez.com/webdesign/_inc/webdesign.png");
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}

tu devrais rapidement voir ce qui te manque comme propriétés à déclarer.

17/11/2020, 11h02
Speed41

Super merci

Heu oui je vois que mon code était un peu juste. Il faut que je continu à tester car un point me gène, c'est que l'image n'est pas en background mais est ajouté donc les autres objets se retrouvent en dessous (ou après) au lieu d'être sur l'image.
Soit je trouve une solution sur le CSS soit je modifie la manière dont sont ajoutés les autres objets.

L'idée c'est une div avec une image en fond (background) cette div représente un moyen d'essai et dedans je fais afficher (img) les ordinateurs que ce moyen possède, actuellement ils sont ajoutés et se mettent à la suite les un des autres et ça fonctionne bien. Avec le code posé brutalement mes ordinateurs sont après l'image pivoté et non dessus.

je fais un système pour cartographier tous les moyens de mon entreprise avec les ordinateurs, j'en suis à mettre des fond dans les moyens pour qu'ils soient plus parlant plus jolie

Je vais chercher

Encore merci