ICTFF Section Informatique

Introduction

Les transformation permettent de modifier l'état d'un bloc: translation, déformation et rotation.

Il n'existe qu'une seule propriété: transform, qui peut recevoir plusieurs mots-clés pour orienter la transformation.

Les propriétés

scale

Ce mot-clé permet une transformation d'échelle.

transform: scale(x,y);	l'échelle varie selon l'axe des X et des Y
transform: scaleX(x);	l'échelle varie selon l'axe des X
transform: scaleY(y);	l'échelle varie selon l'axe des Y
x et y sont des valeurs numériques acceptant une décimale transform: scale(2,1.1); permet de multiplier par 2 la taille selon X et par 1.1 la taille selon Y

Démo
<style>
  div[class^="monbloc"]{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    line-height: 60px;
    text-align: center;
    transition: all 1s ease-in-out;
  }
  div[class^="monbloc"]:hover {
    transform: scale(2,2);
  }
</style>
</head>
<body>
<div class="monbloc1">box 1</div>
<div class="monbloc2">box 2</div>
<div class="monbloc3">box 3</div>
</body>

Dans l'exemple précédent on utilise la propriété transition pour fluidifier la transformation.

translate

Ce mot-clé permet un déplacement du bloc.

transform: translate(npx,upx);	le déplacement se fait selon l'axe des X et des Y
transform: translateX(npx);	le déplacement se fait selon l'axe des X
transform: translateY(upx);	le déplacement se fait selon l'axe des Y
n et u sont des valeurs numériques exprimées en pixels transform: translate(20px,30px); permet de déplacer de 20px l selon X et de 30px selon Y

Démo
<style>
  div[class^="monbloc"]{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    line-height: 60px;
    text-align: center;
    transition: all 1s ease-in-out;
  }
  div[class^="monbloc"]:hover {
    transform: translate(20px,20px);
  }
</style>
</head>
<body>
<div class="monbloc1">box 1</div>
<div class="monbloc2">box 2</div>
<div class="monbloc3">box 3</div>
</body>

skew

Ce mot-clé permet de déformer un bloc selon un ou 2 axes.

transform: skew(ndeg,udeg);	la déformation se fait selon l'axe des X et des Y
transform: skewX(ndeg);	la déformation se fait selon l'axe des X
transform: skewY(udeg);	la déformation se fait selon l'axe des Y
n et u sont des valeurs numériques exprimées en degrés transform: skew(10deg,10deg); permet une déformation de 10 degrés selon X et de 10 degrés selon Y

Démo
<style>
  div[class^="monbloc"]{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    line-height: 60px;
    text-align: center;
    transition: all 1s ease-in-out;
  }
  div[class^="monbloc"]:hover {
    transform: skew(10deg,10deg);
  }
</style>
</head>
<body>
<div class="monbloc1">box 1</div>
<div class="monbloc2">box 2</div>
<div class="monbloc3">box 3</div>
</body>

rotate

Ce mot-clé permet de faire subir une rotation à un bloc selon un ou 2 axes.

transform: rotate(ndeg);	la rotation se fait selon l'axe des X et des Y
transform: rotateX(ndeg);	la rotation se fait selon l'axe des X
transform: rotateY(udeg);	la rotation se fait selon l'axe des Y
n et u sont des valeurs numériques exprimées en degrés transform: rotate(10deg); permet une rotation de 10 degrés selon X et de 10 degrés selon Y

Démo
<style>
  div[class^="monbloc"]{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    line-height: 60px;
    text-align: center;
    transition: all 1s ease-in-out;
  }
  div[class^="monbloc"]:hover {
    transform: rotateX(80deg);
  }
</style>
</head>
<body>
<div class="monbloc1">box 1</div>
<div class="monbloc2">box 2</div>
<div class="monbloc3">box 3</div>
</body>

Plusieurs effets en une commande

Attention, il faut respecter l'ordre suivant pour pouvoir enchaîner les effets, un effet peut être absent mais l'ordre doit être respecté.

scale translate skew rotate

Démo
<style>
  div[class^="monbloc"]{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    line-height: 60px;
    text-align: center;
    transition: all 1s ease-in-out;
  }
  div[class^="monbloc"]:hover {
    transform: scale(2,2) translateX(180px) skewX(20deg) rotate(80deg);
  }
</style>
</head>
<body>
<div class="monbloc1">box 1</div>
<div class="monbloc2">box 2</div>
<div class="monbloc3">box 3</div>
</body>

Les transformations