Transform-origin

Transform-origin

Un attribut permet de choisir le point de référence d'un élément (cadre, image) pour son animation.

Ce point de référence est, par défaut l'angle haut/gauche.

L'écriture par défaut est transform-origin:Vu Hu; où V est la position verticale (axe X) et H la position horizontale(axe Y) et où u est l'unité (px, %, top/bottom et left/right).

Si votre image est placée près du bord droit de votre page, l'agrandissement peut la faire sortir de la page; voyons des exemples:

L'image est placée au dessus d'un cadre de référence pour bien montrer son mouvement; survolez chaque bouton..

Une remarque m'a été faite au sujet de la différence apparente entre le nom du bouton et le mouvement de l'image.

Si vous agrandissez l'image à partir du point de référence par défaut: haut/gauche, elle va s'agrandir, à partir de ce point, vers la droite et vers le bas... c'est à dire à l'opposé du nom du bouton !

De même, si le point de référence est bas/droit, l'image va s'agrandir à partir de ce point et donc aller vers le haut et la gauche; ceci nous servira si vous avez placé votre image dans l'angle bas/droit de votre montage: son survol la fera rester dans le montage et non en sortir .

haut gauche

haut droit

bas droit

bas gauche

<div style="width: 40vw; height: 50vh; border: 0.1vw solid black; margin: 11vh auto;">
<p id="b1">haut gauche</p>
<p id="b2">haut droit</p>
<p id="b3">bas droit</p>
<p id="b4">bas gauche</p>
<p id="b5"> </p>
<p id="une" style="width: 10vw; margin: 10vh 0vw 0vh 10vw;"><img style="width: 10vw;" src="http://ekladata.com/i5Lve0QbA-KXHlik4OKoWLnmqkg.jpg" alt="" /></p>
</div>

<style type="text/css"></style>