28172 sujets

CSS et mise en forme, CSS3

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

Pages :
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)
Smiley biggrin
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. Smiley hum
Merci Smiley cligne
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 Smiley smile
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 Smiley cligne

https://codepen.io/herde2/pen/NWBmEJa
Modérateur
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)
Merci _laurent Smiley biggrin
TOP !
Mais je n'ai pas réussi à anamorphoser l'image... ou mieux encore (et sûrement plus facile) : l'agrandir, afin qu'elle couvre toute la div.
Encore une fois... j'ai cherché Smiley murf
Merci et bonne soirée à vous Smiley cligne upload/1675807751-48192-capturedaeacran2023-02-07aa23.png
Meilleure solution
ça... ROULE Smiley lol 
.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)
@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.
Modérateur
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... Smiley sweatdrop
Modérateur
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... Smiley sweatdrop
@_laurent,
Salut !
Si je ne mets pas l'image à 200%, elle ne couvre pas tout la "superficie". Voir la capture de 23H09 le 7 Smiley smile
Bonne journée Smiley cligne
Merci Laurent pour la réponse.
Pauvre fille, elle va tourner jusqu'à qu'on lui trouve sa place, c'est pas juste Smiley lol
Modérateur
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 Smiley smile
Bonne journée Smiley cligne


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 ?
Modérateur
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)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à