-
Transform skew
transform:skew(15deg); pour déformer les images ou cadres. Survolez les exemples.
<p ><img id="sk1" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk1{transition:transform 1s linear; width:400px; height:400px; transform:skew(15deg) translate(50px, 0px);}
#sk1:hover{transform:skew(0deg);}
--></style>
Nous allons pouvoir choisir le sens de la déformation (skewX et skewY = horizontal et vertical) et, par défaut, c'est skewX qui est appliqué.
<p><img id="sk2" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk2{transition:transform 1s linear; width:400px; height:400px; transform:skewY(0deg) translate(50px, 0px);}
#sk2:hover{transform:skewY(-15deg);}
--></style>
...
<p><img id="sk3" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk3{transition:transform 1s linear; width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px);}
#sk3:hover{transform:skewY(0deg) skewX(0deg);}
--></style>
La déformation horizontale et verticale n'ont pas la même valeur.
<p><img id="sk4" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk4{transition:transform 1s linear; position:relative;width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px) perspective(200px) rotateX(25deg);}
#sk4:hover{transform:skewY(0deg) skewX(0deg) translate(150px,0px);}
--></style>
<p><img id="sk5" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk5{transition:transform 1s linear; position:relative;width:200px; height:200px; transform:skewY(15deg) skewX(45deg) translate(150px, 20px) perspective(200px) rotateX(25deg); border-radius:50%;}
#sk5:hover{transform:skewY(0deg) skewX(0deg) translate(150px,50px);}
--></style>
En ajoutant un arrondi, etc, etc...
code pour s'amuser...
<p><img id="sk5" src="http://ekladata.com/4legvgKLtPMnaHDjVi-oEFcz_KA/400x400.jpg" alt="" /></p>
<style><!--
#sk6{transition:transform 1s linear; width:200px; height:200px; transform:skew(20deg,20deg) translate(150px, 20px);}
#sk6:hover{transform:skew(-20deg,-20deg) translate(220px,150px);}
--></style>
...
......