Réaliser une css transformation 2D
CSS3 cours tutorial
Dans ce chapitre, vous apprendrez les méthodes css 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
|
Webkit
|
|
|
|
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
Exemple : 📋 Copier 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
Exemple : 📋 Copier 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
Exemple : 📋 Copier 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(https://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é
Exemple : 📋 Copier 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
Exemple : 📋 Copier 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
Exemple : 📋 Copier 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 :
Exemple : 📋 Copier 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 :
Exemple : 📋 Copier 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(https://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 chapitre suivant
