/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
pourquoipas732
Dans nos montages, nous pouvons ajouter une rotation, au survol d'un élément; cette rotation peut être sur un axe, deux axes ou trois axes (3d).
L'inconvénient du survol d'un élément animé est que l'animation fait sortir le curseur de sur l'élément et arrête ladite animation; mes premiers exemples seront au clic.
Voyons des exemples dans un montage sans image.
L'écriture est soit par l'axe de l'animation et pour chaque axe (X,Y,Z,angle) soit par 3d(X,Y,Z,angle)
L'angle peut être en + ou en -.
On peut aussi écrire rotate3d pour un seul axe: exemple pour axe X:rotate3d(1,0,0,45deg); car rotate3d(X,Y,Z,angle);
Le chiffre de 0 à 1 précise l'importance de l'animation sur l'axe concerné: axe X à 50%= rotate3d(0.5,0,0,44deg) soit rotateX(22deg).
En ajoutant un attribut de changement de taille, nous allons créer une animation en rotation.
Au départ: transform:rotateX/Y/Z(0deg); et transform:rotate(3d{0,0,0,180deg); et au clic, valeur indiquée dedans.
Survolez cette photo: pas de translation donc survol plus simple.
<p style="text-align: center; height: 70vh;"><img id="p1" src="https://ekladata.com/0bLILbahdygOoplZ0CBAkHPEsZk.jpg" alt="" /></p>
<style><!--
#p1{transform:rotate(-360deg) scale(0.1); border-radius:50%; transition:all 1s linear;}
#p1:hover{transform:rotate(0deg) scale(1);}
--></style>
