transform scale

Transform scale (échelle équivalent à zoom)

Agrandissement classique:
<p ><img id="p1" src="https://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
<style><!--
#p1{transition:all 1s linear; transform:translate(20px,20px) ;}
#p1:hover{transform:translate(100px,80px) scale(1.5) ;}
--></style>

Agrandissement largeur
<p ><img id="p2" src="https://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
<style><!--
#p2{transition:all 1s linear; transform:translate(20px,20px) ;}
#p2:hover{transform:translate(100px,80px) scaleX(1.5) ;}
--></style>

Agrandissement hauteur
<p ><img id="p3" src="https://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
<style><!--
#p3{transition:all 1s linear; transform:translate(20px,20px) ;}
#p3:hover{transform:translate(100px,80px) scaleY(1.5) ;}
--></style>

Agrandissement 3d
<p ><img id="p4" src="https://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
<style><!--
#p4{transition:all 1s linear; transform:translate(120px,20px) ;}
#p4:hover{transform:translate(120px,20px) scale3d(1.2,1,1.2) perspective(500px) rotatex(60deg);
--></style>
Ce code vous permet de faire un trapèze qui se redresse au survol, en inversant le mouvement.

Agrandissement 3d
<p ><img id="p5" src="https://ekladata.com/vbVJudbAURLSS7d6lsWctdCFGQw/335x335.jpg" alt="" /></p>
<style><!--
#p5{transition:all 1s linear; transform:translate(150px,0px) scale3d(0.3,0.3,0.3) perspective(180px) rotateX(60deg);}
#p5:hover{transform:translate(150px,0px) scale3d(1,1,1) perspective(1000px) rotateX(0deg);}
--></style>
...

....