Sens translation

Sens translation

En réalisant un montage, j'ai eu du mal à retrouver un réglage pour animer une image en translation alors, je reviens sur le sujet.

Lorsque le survol d'un bouton anime une image, si cette image est placée à gauche du montage (réglage par défaut suf si vous l'avez modifié), et que l'animation fait s'agrandir l'image, elle va le faire de gauche à droite: exemple bouton 1.

Si l'image est placée à droite du montage, le point de référence étant son angle haut/gauche, elle va apparaître en glissant et non se découvrir en partant du bord gauche: exemple 2.

Si vous souhaitez que l'image se découvre en partant de son bord droit, il faut agir sur la position de l'image de fond (background-position): exemple 3.

N'oublions pas que les valeurs de background-position sont les mêmes que celles de transform:translation(Hpx,Vpx) mais en négatif.

****************

1

2

3

****************

<div style="width: 80vw; height: 45vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: linear-gradient(to bottom,#81BEF7 0%,#CEECF5 100%); background-size: cover;">
<p id="ong1" class="ong">1</p>
<p id="ong2" class="ong">2</p>
<p id="ong3" class="ong">3</p>
<p id="mai1" class="mai"> </p>
<p id="mai2" class="mai"> </p>
<p id="mai3" class="mai"> </p>
</div>

<style></style>