Réaliser des transformations 2D avec CSS3

Les transformations en CSS3
Avec la propriété transform de CSS3, nous pouvons déplacer, mettre à l’échelle, appliquer des rotations et même déformer un élément.
transformation 2D
Comment ça marche ?
Une transformation est un effet qui permet à un élément de changer de forme, de taille et/ou de position.
Vous pouvez transformer vos éléments à l'aide de la transformation 2D ou 3D.

Somaire

Réaliser une transformations 2D

CSS3 cours tutorial

Dans ce chapitre, vous apprendrez les méthodes de transformation 2d suivantes:
La méthode translate()
La méthode Rotate()
La méthode Scale()
La méthode Skew()
La méthode Matrix()
Vous apprendrez sur les transformations 3D dans le prochain chapitre.
 


Prise en charge des navigateurs
 

Propriété

Appui de navigateur

transformer

chrome

Webkit

fire fox

ie

opera

safari

Webkit

 
Internet Explorer 10, Firefox et Opera prennent en charge la propriété transform.
Chrome et Safari nécessite le préfixe - webkit-.
Remarque : Internet Explorer 9 nécessite le préfixe - ms-.


Exemple Effectuer une rotation de 30 deg sur un div

 

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:200px;
height:100px;
background-color:gold;
margin-top:50px;
/* Rotatino sur un div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari et Chrome */
}
</style>
</head>
<body>

<div>Voici une rotation de 30 deg</div>

</body>
</html>
 

La méthode translate() pour changer la position d’un élément HTML

 
Avec la méthode translate(), l'élément est déplacé de sa position actuelle vers une autre position qui dépend des paramètres indiqués pour la gauche ou la droite (axe des x) et la position basse ou haute (axe des y) :
 

Exemple Déplacer un div avec la méthode translate

 

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
background-color:blue;
color:#fff;
}
div#div2
{
transform:translate(70px,120px);
-ms-transform:translate(70px,120px); /* IE 9 */
-webkit-transform:translate(70px,120px); /* Safari et Chrome */
}
</style>
</head>
<body>

<div>Voici un élément div.</div>

<div id="div2">Voici un autre élément div.</div>

</body>
</html>
 

 
La valeur translate(70px,120px) déplace l élément de 70 pixels de gauche à droite et de 100 pixels de haut en bas.

Exemple deux images sur un plan

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
background:url(http://www.oujood.com/img1/css.png);
background-size:100% 100%;
background-repeat:no-repeat;
color:#fff;
box-shadow: 3px 2px 2px #666;
}
#div
{
transform:translate(50px,50px);
-ms-transform:translate(70px,50px); /* IE 9 */
-webkit-transform:translate(70px,50px); /* Safari et Chrome */

}
</style>
</head>
<body>

<div id="div"></div>

<div></div>

</body>
</html>
 

 


Appliquer une rotation à un élément avec la méthode rotate()

 
Avec la méthode rotate(), l'élément pivote vers la droite à un degré donné. Les valeurs négatives sont autorisées et font pivoter l'élément vers la gauche.
 

Exemple Faire pivoter un div de 45 degré

 

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
margin-top:20px;
background-color:red;
}
#div
{background-color:gold;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari et Chrome */
}
</style>
</head>
<body>
<div id="div"></div>
<div></div>
</body>
</html>
 

 
La valeur rotate(45deg) fait pivoter l'élément vers la droite à 45 degrés.


La méthode scale(), changer la taille d’un élément avec CSS

Avec la méthode scale(),la taille de l'élément augmente ou diminue, selon les paramètres indiqués pour la largeur (axe x) et la hauteur (axe y) :
 

Exemple changer la taille d’un div avec la méthode scale

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:80px;
height:80px;
background-color:gold;
border:1px solid #000;
}
div#div2
{margin:45px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Voici un div normal</div>
<div id="div2">Et voici un div affecté par scale</div>
</body>
</html>
 

 
La valeur scale(2,2) transforme la largeur à être deux fois sa taille initiale et la hauteur 2 fois sa taille d'origine.
 


Appliquer une distorsion avec la méthode skew()

Avec la méthode skew(), l'élément se transforme avec un angle donné, selon les paramètres indiqués à l'horizontale (axe des x) et la verticale (axe y) :

Exemple une déformation de 10 degrés autour de l'axe x et 25 degrés autour de l'axe y

 

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
background-color:#ffdd00;
border:1px solid black;
}
#div2
{margin:20px;
transform:skew(10deg,25deg);
-ms-transform:skew(10deg,25deg); /* IE 9 */
-webkit-transform:skew(10deg,25deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Voici un div normal</div>
<div id="div2">Et voici un div affecté par skew</div>
</body>
</html>
 

 
La valeur skew(10deg,25deg) affect l'élément d’une déformation de 10 degrés autour de l'axe x et 25 degrés autour de l'axe y.


Le matrix(), méthode

 
La méthode matrix() regroupe toutes les méthodes de transformation 2D en une seule.
La méthode  matrix prend six paramètres, qui contiennent des fonctions mathématiques, ce qui permet de : faire pivoter, mettre à l'échelle, déplacer (appliquer une translation) et incliner des éléments avec une seule déclaration.

Exemple Comment faire pivoter un div 30 degrés, à l'aide de la méthode de la matrice :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
background-color:#ffdd00;
border:1px solid black;
}
#div2
{marin-top:20px;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Voici un div normal</div>
<div id="div2">Et voici un div affecté par matrix</div>
</body>
</html>
 

 


Utilisation de plusieurs transformations en même temps sur un élément HTML

Pour appliquer plusieurs transformation à un élément HTML dans une seule déclaration il suffit de séparer les différentes méthode par des espaces comme dans l’exemple suivant :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Les transformations en CSS3</title>
<style> 
div
{
width:100px;
height:75px;
background:url(http://www.oujood.com/img1/css.png);
background-size:100% 100%;
background-repeat:no-repeat;
color:#fff;
box-shadow: 5px 3px 3px #777777;
}
#div
{
transform:translate(25px,50px) rotate(40deg) ;
-ms-transform:translate(25px,50px) rotate(40deg) ; /* IE 9 */
-webkit-transform:translate(25px,50px) rotate(40deg) ; /* Safari et Chrome */
}
</style>
</head>
<body>
<div id="div"></div>
<div></div>
</body>
</html>
 

 
 Et voila testez cet exemple et appréciez le résultat
Remarque : Faite attention à l’ordre des méthodes car si vous inversez l’ordre le résultat sera différent.


Nouvelles propriétés de transformation

Le tableau suivant répertorie toutes les propriétés de transformation :

Propriété

Description

transform

Appliquer une transformation 2D ou 3D a un élément

transform-origin

Permet de changer  l'origine pour les transformations d'un élément.

Les méthodes Transform 2D

Fonction

Description

matrix(n,n,n,n,n,n)

Définis une  transformation 2D, en utilisant la méthode matrix

translate(x,y)

Définis une  translation 2D, le long des axes X- et Y

translateX(n)

Définis une  translation 2D, le long de l’axe X

translateY(n)

Définis une  translation 2D, le long de l’axe Y

scale(x,y)

Définis une mise à l’echelle 2D par la méthode scale , le long des axes X- et Y

scaleX(n)

Définis une mise à l’echelle 2D par la méthode scale , le long de l’axe X

scaleY(n)

Définis une mise à l’echelle 2D par la méthode scale , le long de l’axe Y

rotate(angle)

Définis une rotation 2D

skew(x-angle,y-angle)

Définis une déformation 2D par la méthode skew, le long des axes X- et Y

skewX(angle)

Définis une déformation 2D par la méthode skew, le long de l’axe X

skewY(angle)

Définis une déformation 2D par la méthode skew, le long de l’axe  Y

Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant