Transform:rotate

La rotation d'un élément au survol prend, par défaut, son centre comme origine de l'animation; nous verrons comment modifier ce paramètre.

Les rotations SURVOL peuvent de faire dans les deux sens et, comme toujours, nous pourrons cumuler plusieurs attributs (déplacement, échelle, perspective...).

<p><img id="p1" src="https://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
<style><!--
#p1{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ;}
#p1:hover{transform:translate(20px,50px) rotate(25deg) ;}
--></style>

<p><img id="p2" src="https://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
<style><!--
#p2{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ;}
#p2:hover{transform:translate(20px,50px) rotate(-25deg) ;}
--></style>

<p><img id="p3" src="https://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
<style><!--
#p3{transition:all 1s linear; transform:translate(20px,50px) rotate(0deg) ; border-radius:50%;}
#p3:hover{transform:translate(20px,50px) rotate(-25deg) ;}
--></style>
Pour avoir une image ovale; un rond demande d'avoir une image carrée (d'origine ou modifiée)

<p><img id="p4" src="https://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
<style><!--
#p4{transition:all 1s linear;width:300px; height:300px; transform:translate(20px,50px) rotate(0deg); transform-origin:100% 100%; border-radius:50%; }
#p4:hover{transform:translate(20px,50px) rotate(45deg)}
--></style>
Le point d'origine est déplacé à l'angle bas/droit de l'image, au lieu de son centre
...

<p><img id="p5" src="https://ekladata.com/23aHwIDWYUGzTNbBvKEMuO0rFlY/sah-rem-014.jpg" alt="" /></p>
<style><!--
#p5{transition:all 1s linear;transform:translate(20px,50px)  perspective(1000px);}
#p5:hover{transform:translate(50px,50px) rotateX(40deg) rotateX(40deg) rotateY(40deg) perspective(100px);}
--></style>
Un essai ( pour moi), de rotation selon les 3 axes mais je n'ai pas pris la formule indiquée, qui ne donnait rien chez moi
..
..

...