28106 sujets

CSS et mise en forme, CSS3

Pages :
Modérateur
(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)
Modérateur
Bon bah je vais pas re-coller ma réponse de tout a l'heure Smiley lol
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 Smiley hum
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" Smiley smile
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 Smiley cligne