Perspective - montages par codes HTML/CSS

J'ai déjà traité ce sujet, il y a belle lurette et j'ai besoin de me remémorer les écritures.

Nous avons déplacer une image ou un cadre au survol, la faire tourner de différentes façons et une animation agréable est la perspective.

Nous pouvons en donner avec différentes orientations; essayer de voir si je me souviens !

Survolez les boutons sur ces quelques exemples: on peut en imaginer d'autres...

<div>
<p id="v1"><button>Echelle et perspective</button></p>
<p id="v1a" style="width: 10vw; height: 20vh; border: 0.1vh ridge brown; text-align: center; background: url('https://ekladata.com/rrVOWN2_HtNxPZxWcgqMoo4vvqA.jpg'); background-size: cover;"> </p>
</div>
<style></style>

<div style="float: left; margin: 0vh 15vw 10vh 10vw;">
<p id="v2"><button>Echelle et perspective</button></p>
<p id="v2a" style="width: 15vw; height: 30vh; border: 0.1vh ridge brown; text-align: center; background: url('https://ekladata.com/rrVOWN2_HtNxPZxWcgqMoo4vvqA.jpg'); background-size: cover;"> </p>
</div>
<style></style>

<div style="float: left; margin: 0vh 15vw 10vh 10vw;">
<p id="v2"><button>Echelle et perspective</button></p>
<p id="v2a" style="width: 15vw; height: 30vh; border: 0.1vh ridge brown; text-align: center; background: url('https://ekladata.com/rrVOWN2_HtNxPZxWcgqMoo4vvqA.jpg'); background-size: cover;"> </p>
</div>
<style></style>

<div style="float: left; margin: 0vh 15vw 10vh 10vw;">
<p id="v4"><button>Echelle et perspective</button></p>
<p id="v4a" style="width: 15vw; height: 30vh; border: 0.1vh ridge brown; border-radius: 0% 0% 0% 0%; text-align: center; background: url('https://ekladata.com/rrVOWN2_HtNxPZxWcgqMoo4vvqA.jpg'); background-size: cover;"> </p>
</div>
<style></style>

...