[Résolu] Comment centrer une image animée

(reprise du message précédent)

PLGPPUR a écrit :

.imgtourne {
  width: 200%;
	height:200%;
	margin-left: -50%;
  transform-origin: center;
  transform: scale(2);
  animation: spin 4s linear infinite;;
}

Ce n'est donc pas bon ?

Bah regarde le code que je t'ai donné... pourquoi tu mélanges width: 200%;, height:200%; et un marge négative avec un scale(2) ?
faut faire soit l'un soit l'autre... si l'utilisation de la marge négative te va pour centrer aucun soucis hein (faudra le faire pour la hauteur aussi). Je proposait une alternative sans marge négative c'est tout.
Modifié par _laurent (08 Feb 2023 - 10:39)

Parce que sinon, ça me donne ça

Bon bah je vais pas re-coller ma réponse de tout a l'heure
Tant que tu as ce que tu veux ca me va.

Bonne journée

Par contre, je tente de mettre un beau smiley devant (zozo), j'ai mis de côté la figcaption pour le moment, et cela ne me donne aucun résultat
Mon HTML

<div id="imgtourne" class="image3"><img src="images/fontourne.jpg"  alt="affiche" class="imgtourne"></div>
<div class="imgtourne zozo"></div>

et mes CSS :

.imgtourne {
  width: 200%;
height:100%;
margin-left: -50%;
  transform-origin: center;
  transform: scale(2);
  animation: spin 4s linear infinite;;
  position: absolute;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: scale(2) rotate(360deg);
  }
}

@keyframes spin {
  100% {
    transform: scale(2) rotate(360deg);
  }
}

.zozo {z-index: 99;
background-image: url("../images/zozo.png");}

Une idée ?
Bon app"

Bah zozo va tourner aussi si ça marche
Je retourne à mes devoirs.
Bon aprèm^^

@Bongota :
Voici ce que ça donne :
https://codepen.io/herde2/pen/WNKBdgg
Je n'ai pas pu mettre l'image "circus" en ligne car pas chez moi

Je comprends mieux, maintenant, l'image est très rapprochée et une grande partie est coupée. Dans ces conditions, bien sûr qu'on ne voit plus le fond rouge. Et Binet est en hover.
C'est indiscret de demander le but final de ce montage

Imagine le fond qui tourne autour
Avec figcaption !
Modifié par PLGPPUR (08 Feb 2023 - 16:07)