Accueil    CSS    Propriété transform
 



style css transform  Style CSS transform

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css transform propose de nombreuses possibilités pour effectuer des transformations sur les éléments html. Elle permet en effet facilement d'appliquer des rotations, des translations, des inclinaisons, des changements de ratio...

Elle n'est pour l'instant pas implémentée directement par les navigateurs, chacun d'eux utilisant un préfixe spécifique :
    - Chrome et safari utilisent la propriété "-webkit-transform"
    - Firefox utilise la propriété "-moz-transform"
    - Opera utilise la propriété "-o-transform"
    - Internet Explorer utilise la propriété "-ms-transform"


L'utilisation du style css transform est très intéressant lors de la création d'animations définies par le style principal animation et mises en place par la règle css @keyframes ou alors avec l'emploi de la propriété transition permettant de réaliser des effets de transition sur les éléments html lors d'actions spécifiques.



Propriétés pour le style transform :




Propriété Définition Valeurs CSS
transform Applique une transformation à l'élément html qu'elle décrit matrix
none
translate
rotate
scale
skew
perspective
CSS 3


Liste détaillée des transformations :


Transformation Description
matrix(v1,v2, ..., v6) Transformation 2d basée sur une matrice de 6 valeurs correspondant à des effets de rotation, d'inclinaison et de translation.
matrix3d(v1,v2, ..., v16) Transformation 3d basée sur une matrice de 16 valeurs
perspective(val) Applique un effet de perspective sur les éléments
rotate(#deg) Rotation 2d centrale de l'élément
rotate3d(#deg,#deg,#deg) Rotation sur les 3 axes
rotateX(#deg) Rotation autour de l'axe X
rotateY(#deg) Rotation autour de l'axe Y
rotateZ(#deg) Rotation autour de l'axe Z
scale(valX, valY) Application d'une échelle de proportion sur les axes X et Y (longueur et hauteur de l'élément)
scale3d(valX, valY, valZ) Application d'une échelle de proportion sur les trois axes de l'élément
scaleX(val) Application d'une échelle de proportion sur l'axe X (longueur de l'élément)
scaleY(val) Application d'une échelle de proportion sur l'axe Y (hauteur de l'élément)
scaleZ(val) Application d'une échelle de proportion sur l'axe Z (profondeur de l'élément)
skew(#deg,#deg) Inclinaison le long des axes X et Y
skewX(#deg) Inclinaison le long de l'axe X
skewY(#deg) Inclinaison le long de l'axe Y
translate(valX, valY) Translation le long des axes X et Y
translate3d(valX, valY, valZ) Translation 3d le long des axes X, Y et Z
translateX(val) Translation le long de l'axe X
translateY(val) Translation le long de l'axe Y
translateZ(val) Translation le long de l'axe Z


Exemple d'utilisation du style css transform :




Exemple de rotation :

<input type="range" min="0" max="360" value="0" oninput="rotateDiv(this.value); resultatRotate.value = this.value;" />
<output id="resultatRotate">0</output>

<div id="DivRotX" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#62B533; opacity:0.8;">X
</div>
<div id="DivRotY" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#62B533; opacity:0.8;">Y
</div>
<div id="DivRotZ" style="display:inline-block; width:120px; margin:5px; height:120px;
   text-align:center; line-height:120px; font-size:28px; border:solid 1px black;
   background-color:#62B533; opacity:0.8;">Z
</div>

<script type="text/javascript">
DRx = document.getElementById('DivRotX');
DRy = document.getElementById('DivRotY');
DRz = document.getElementById('DivRotZ');

function rotateDiv(valeur){
   DRx.style.WebkitTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.MozTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.OTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.msTransform = 'RotateX('+ valeur + 'deg)';
   DRx.style.transform = 'RotateX('+ valeur + 'deg)';
   
   DRy.style.WebkitTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.MozTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.OTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.msTransform = 'RotateY('+ valeur + 'deg)';
   DRy.style.transform = 'RotateY('+ valeur + 'deg)';
   
   DRz.style.WebkitTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.MozTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.OTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.msTransform = 'RotateZ('+ valeur + 'deg)';
   DRz.style.transform = 'RotateZ('+ valeur + 'deg)';
}
</script>


Exemple de rotation : 0

X
Y
Z


0

X
Y
X-Y


1

X
Y
Z



X : 0
Y : 0
Z : 0

T