/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
pourquoipas732
L'inclinaison en perspective (axe z) est toujours associé à une rotation.
Nous connaissons l'attribut rotation (rotate(25deg);) mais peut être moins le fait que l'on peut choisir un axe (horizontal (x) ou vertical(y)) pour cette rotation; ce sens de rotation va nous servir avec la perspective.
Ce sens de rotation n'offre pas d'intérêt sans la perspective: l'image semble s'agrandir mais rien de spectaculaire: vous pouvez essayer.
Un autre attribut est essentiel pour ce genre d'animation: le point d'origine de l'animation: transform-origin:left center/rigtn center/top center/bottom center;
La valeur par défaut est le centre de l'image ce qui fait s'agrandir un côté et diminuer l'autre: alors, le côté agrandi occupe tout l'écran ! Vous pouvez essayer de supprimer cet attribut pour le constater.
Survolez chaque image.
<img id="x1" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x1{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatey(45deg); transform-origin:left center;}
#x1:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
--></style>
<img id="x2" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x2{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatey(-45deg); transform-origin:right center;}
#x2:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
--></style>
<img id="x3" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x3{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatex(45deg); transform-origin:bottom center;}
#x3:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
--></style>
<img id="x4" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x4{transition:all 1s linear; transform:translate(0px,50px) perspective(400px) rotatex(-45deg); transform-origin:top center;}
#x4:hover{transform:translate(0px,50px) perspective(1000px) rotatey(0deg);}
--></style>
<img id="x5" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x5{transition:all 1s linear; transform:translate(0px,70px) perspective(400px) rotate(-45derg) rotatey(45deg); transform-origin:left center;}
#x5:hover{transform:translate(0px,70px) perspective(1000px) rotate(0deg) rotatey(0deg);}
--></style>
Vous remarquerez la possibilité de donenr une rotation centrée (rotate) et une rotation selon un axe (rotatey) dans un même code.
<img id="x5" src="https://ekladata.com/pEDSvnfCluBtB2IM85oN8nnLdng.jpg" alt="" />
<style><!--
#x6{transition:all 1s linear; transform:translate(0px,10px) perspective(400px) rotate(-45deg) rotatex(45deg); transform-origin:bottom center;}
#x6:hover{transform:translate(0px,10px) perspective(1000px) rotate(0deg) rotatex(0deg);}
--></style>
