-
Montage 339
Un rappel de l'utilisation de la rotation d'une image, selon sa position.
Survol
<div style="width: 900px; height: 506px; margin: 10px auto; border: 1px solid black; text-align: left; background: linear-gradient(to top,rgba(255,255,255,1) 0%, rgba(0,128,128,1) 100%);"><img id="ret1" class="ret" src="http://ekladata.com/aNDPZ6zpG9yrirJnd3iU_cbfYFQ@900x506.jpg" alt="" /> <img id="ret2" class="ret" src="http://ekladata.com/I0hximF7pABXUMDvtWXEb6a-2bI@900x506.jpg" alt="" /> <img id="ret3" class="ret" src="http://ekladata.com/75--W5hMDqu_mTzM_zEKTZ90B3E@900x506.jpg" alt="" /> <img id="ret4" class="ret" src="http://ekladata.com/0hD-Egp_Yynf68PmjhbqTTZQi7M@900x506.jpg" alt="" /> <img id="ret5" class="ret" src="http://ekladata.com/ytOtW8EH9ujgyboAarAGhgVpbYI@900x506.jpg" alt="" />
<p id="ind">Survol</p>
</div>
<style><!--
#ind{position:absolute; z-index:1; width:120px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(390px,100px);}
.ret{position:absolute; z-index:1; transition:all 1s linear;}
#ret1{transform-origin:center left; transform:translate(0px,0px) perspective(150px) rotatey(60deg);}
#ret2{transform-origin:center top; transform:translate(0px,0px) perspective(150px) rotatex(-60deg);}
#ret3{transform-origin:center right; transform:translate(0px,0px) perspective(150px) rotatey(-60deg);}
#ret4{transform-origin:center bottom; transform:translate(0px,0px) perspective(150px) rotatex(60deg);}
#ret5{width:450px; height:253px; transform:translate(225px,126px) rotatex(70deg);}
#ret1:hover,#ret2:hover,#ret3:hover,#ret4:hover,#ret5:hover{z-index:5; width:900px; height:506px; transform:translate(0px,0px) perspective(1500px) rotate(0deg);}
--></style>
La rotation peut être soit selon l'axe horizontal y, soit selon l'axe vertical x; l'effet est plus agréable en ajoutant de la perspective.
La valeur de la rotation peut-être en positif ou en négatif à définir selon la position de l'image.
Le point de référence: transform-origin; est, par défaut, le centre de l'image (image centrale); pour une image positionnée sur un côté, il faut définir le côté comme point de référence, en latéral comme en vertical.
Rappel: la valeur de la perspective est importante avec une petite valeur (10px) et moindre plus la valeur est importante.
Au survol, la rotation est réglée à (0deg) et la perspective en grande valeur (1500px).