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

Bonjour,
Je cherche à centrer une image dans un bloc (quelle que doit la taille du bloc).
Je ne trouve pas Ci-dessous le codepen :
https://codepen.io/herde2/pen/NWBmEJa
Une aide ne serait pas de refus
Merci à vous !

Bonjour,
tu peux corriger ceci dans ton css :

.imgtourne {
	-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
    width : 100%; /* J'ai changé ici */
height : auto;}/* Ici aussi */

En flexbox, on peut aussi le faire, mais puisque ça fonctionne ici. De même, text-align n'est plus utile.
Je crois que les préfix ne sont plus nécessaires pour la propriété transform, mais à vérifier.
Modifié par _laurent (08 Feb 2023 - 10:00)

Bonjour Bongota !^^
Merci beaucoup mais je souhaiterais que l'image soit à 200% afin que l'on ne voit pas le fond rouge. Passer le width de 100% à 200% décale l'image de 100% à droite; et le centre se retrouve donc sur le bord droit.
Merci
Modifié par _laurent (08 Feb 2023 - 10:00)

Pour le coup, j'ai bloqué l'image, non pas pour l'admirer, mais pour constater qu'elle était plus haute que large. De ce fait, quand elle va tourner, on verra toujours du rouge. Ou alors il faudra faire en sorte qu'elle soit coupée, ce qui n'est pas super. Et si tu mettais

background-color:transparent; 

On ne verrait plus le rouge.
J'ai réussi à centrer le tout en agrandissant à 200%, mais en utilisant une marge négative, ce qui n'est pas bien en css, je crois. Quand on met une marge négative, c'est qu'il y a un problème quelque part. D'autant plus que la largeur 200% va avec la marge négative, qu'il faut modifier si on bouge l'autre. Ce tournis dépasse mes capacités. Peut-être que d'autres ici vont trouver une meilleure solution. Enfin, ça fonctionne avec 200%.

#imgtourne {
background-color: transparent;
overflow: hidden;
	float: left;
	width: auto;
	line-height:0;
	width: 38%;}

.imgtourne {
display:flex;
align-content: center;
animation:spin 4s linear infinite;
width:200%;
margin-left:-14em; /*Ici, la marge négative*/
height :auto;}

Modifié par Bongota (07 Feb 2023 - 19:49)

Oui, cela fait longtemps que j'avais pas utilisé de marge négative
Par contre, l'image ne prend pas "toute la place". Le but est qu'il n'y ai plus de "transparent"(ou "red") quand l'image tourne. L'objectif est d'avoir un fond "étoilé", une image png (fond transparent) par dessus puis le figcation (au dessus du png).
Ai-je commencé par ce qu'il fallait : le fond ?

Bonne soirée

https://codepen.io/herde2/pen/NWBmEJa

Salut,


Tu peux utiliser scale(2) (ou plus) plutôt que width 200% :

#imgtourne {
  background-color: red;
  overflow: hidden;
  height: 500px;
  width: 380px;
}
figure {
  margin: 0;
}
.imgtourne {
  width: 100%;
  height: auto;
  transform-origin: center;
  transform: scale(2);
  animation: spin 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: scale(2) rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: scale(2) rotate(360deg);
  }
}

Modifié par _laurent (07 Feb 2023 - 22:35)

ça... ROULE

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

Si c'est correct.... ????
Encore merci à vous !
Modifié par PLGPPUR (07 Feb 2023 - 23:35)

J'aurais plutôt mis

min-width: 100%;
min-height: 100%;

sans la marge négative du coup...

@PLGPPUR
Tant mieux si ça te va, mais j'aimerais voir le résultat, parce que je n'ai pas trop compris ce que tu veux, en dessin.
Même si les marges négatives résolvaient le problème, je suis curieux de savoir pourquoi cette image se décalait sur la droite quand on augmentait les %. Laurent pourrait peut-être me le dire.

Bongota a écrit :
Même si les marges négatives résolvaient le problème, je suis curieux de savoir pourquoi cette image se décalait sur la droite quand on augmentait les %. Laurent pourrait peut-être me le dire.

Bah quand un image est trop grande par rapport a son parent (200% ici) elle se cale à gauche par défaut mais je t'avoue je n'ai pas plus de détail. Juste ca a été fait comme ça j'imagine...

@_laurent,
Salut !
Si je ne mets pas l'image à 200%, elle ne couvre pas tout la "superficie". Voir la capture de 23H09 le 7
Bonne journée

@Bongota : tu désires un codepen ?
Bonne journée

Merci Laurent pour la réponse.
Pauvre fille, elle va tourner jusqu'à qu'on lui trouve sa place, c'est pas juste

Oui, un codepen, sinon rien
Modifié par Bongota (08 Feb 2023 - 10:29)

PLGPPUR a écrit :
@_laurent,
Salut !
Si je ne mets pas l'image à 200%, elle ne couvre pas tout la "superficie". Voir la capture de 23H09 le 7
Bonne journée

D'où la proposition de l'utilisation de scale(2) à la place pour garder l'efft x2 mais en conservant le centrage hors marge négative...

.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 ?

@Bongota :
Je te fais le codepen ce soir

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)