28172 sujets

CSS et mise en forme, CSS3

Transform-origin

Bonjour,
la fonction "transform-origin" permet d'afficher une image à un endroit précis d'une page, en indiquant deux valeurs (x, y). L'image se place bien là où l'on veut, mais si on a un bandeau de six images, la commande "transform-origin" va appliquer sur les six images la même valeur x, y. C'est gênant, horizontalement, chaque image va s'afficher en fonction de sa position initiale et par conséquent pas au même endroit sur la page. Avec une résolution smartphone, certaines images peuvent sortir de l'écran. Y-a-t-il un moyen pour afficher toutes les images au centre de la page, par exemple ? Voici une capture d'écran du bandeau d'images en question :
upload/1577553582-67790-screenshot-2019-12-28changers.png

Et le css que j'ai utilisé. C'est la première valeur, 25px, qui décide de l'emplacement de l'image au survol ou au toucher :

.cf:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform: scale(4.4,4.4);
    -webkit-transform-origin: 25px -15px;
    -moz-transform: scale(4.4,4.4);
    -moz-transform-origin: 25px -15px;
    -o-transform: scale(4.4,4.4);
    -o-transform-origin: 25px -15px;
    -ms-transform: scale(4.4,4.4);
        transform: scale(4.4,4.4);
    -ms-transform-origin: 25px -15px;
        transform-origin: 25px -15px;
  }

Merci pour une solution.
Voici le html (à répéter pour le nombre d'images).

<div class="swip">
<figure>
   <div class="cf">
  <img class="bottom" src="Images/Fer-Pret-100.jpg" alt="Fer" title="Fer pr&circ;t &agrave; poser"/>
  <img class="top" src="Images/Croix-100.jpg"  alt="Croix" title="Croix de cordes"/>
</div>
</figure>

La raison de la présence des deux lignes img, c'est qu'en résolution desktop, le système d'affichage n'est pas le même qu'en résolution smartphone, et une partie seulement du css sert à l'affichage en mode smartphone. Mon problème se trouve dans cette dernière résolution.
J'espère que ma question a bien été posée et comprise. Sur le bandeau présenté plus haut, chaque image survolée ira se placer sur la page en fonction des deux valeurs données dans "transform-origin". Je peux décider par exemple que l'image du milieu s'affichera juste en dessous d'elle. Dans ce cas, l'image de gauche, ou de droite, s'affichera aussi sous elle, et elle débordera de l'écran (toujours en mode smartphone). Le css : 

.cf {
	position: relative;
	width: 16%;
  	float: left;
  	height: auto;	
	min-width: 10vw;
   	}
.cf img {
   width: 96%;
   border: .1rem inset gray;
   border-radius: 4px;
  -webkit-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.cf img.top:hover {
  opacity: 0;
}
/*Effet de zoom in/out et de déplacement sur les images*/
.cf img.top {
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0;
  } 
 .cf:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform: scale(4.4,4.4);
    -webkit-transform-origin: 20px -15px;
    -moz-transform: scale(4.4,4.4);
    -moz-transform-origin: 20px -15px;
    -o-transform: scale(4.4,4.4);
    -o-transform-origin: 20px -15px;
    -ms-transform: scale(4.4,4.4);
        transform: scale(4.4,4.4);
    -ms-transform-origin: 20px -15px;
        transform-origin: 20px -15px;
  }
Pour faire ce que tu veux j’utiliserais plutôt un positionnement en absolu ou relatif. Ce qui permet de positionner les images avec les propriétés top et left.
Merci pour la réponse, mais .cf est déjà en position "relative".

Il faut bien comprendre que les deux valeurs x y de "transform-origin" s'appliquent à toutes les images du bandeau. Je ne vois pas comment je pourrais agir avec top ou left sur chaque image. Ce problème semble insurmontable, j'utilise sans doute cette fonction à mauvais escient mais je me contente de ce petit défaut pour le moment.
Bonjour,
les images sont déjà dans une div.
Je n'ai pas trouvé de solution et je suis passé à un autre mode d'affichage, qui me satisfait. Cette fois, l'image survolée est bien au centre de la page, je me permets même un petit effet. Reste juste quelques ajustements à faire. Pour ne pas laisser ceux qui ont tenté de m'aider sur leur faim, voici ce que j'ai adopté. Il s'agit ni plus ni moins d'une lightbox, un peu modifiée.
Un lien vaut mieux qu'un css pas encore finalisé (toujours en mode smartphone) :
cliniquejembe.free.fr
Merci de m'avoir consacré un peu de temps.
Modifié par Bongota (30 Dec 2019 - 18:15)
Sujet clos
Aller à