OUJOOD.COM
...
Les propriétés CSS
Exemple Faire pivoter un élément div :
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:#efe;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Bonjour</div>
</body>
</html>
Appui de navigateur
La propriété transform est prise en charge dans Internet Explorer 10, Firefox et Opera.
Internet Explorer 9 prend en charge une solution de rechange, la propriété -ms-transform (transformations 2D uniquement).
Safari et Chrome prend en charge une solution de rechange, la propriété - webkit-transform (transformations 2D et 3D).
Opera supporte les transformations 2D uniquement.
Définition et utilisation
La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, appliquer une inclinaison, etc. … aux éléments.
Pour mieux comprendre la propriété transform, voici un exemple :
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
#div
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari et Chrome */
}
</style>
<script>
function rotate(value)
{
document.getElementById('div').style.webkitTransform="rotate(" +
value + "deg)";
document.getElementById('div').style.msTransform="rotate(" +
value + "deg)";
document.getElementById('div').style.MozTransform="rotate(" +
value + "deg)";
document.getElementById('div').style.OTransform="rotate(" + value
+ "deg)";
document.getElementById('div').style.transform="rotate(" + value
+ "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>
</head>
<body>
<p>Rotation de l'élément div:</p>
<div id="div"> Bonjour </div>
Rotate: <br>
<input type="range" min="-360" max="360" value="7"
onchange="rotate(this.value)" /><br>
transformation : rotation de :(<span
id="span1">0deg</span>);
</body>
</html>
| Valeur par défaut : | aucun |
|---|---|
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet.style.transform="rotate(7deg)" |
Syntaxe
transform: none|transform-functions;
| Valeur | Description |
|---|---|
| none |
Qui définit qu'il ne devrait y avoir aucune transformation
Exemple: #myDIV { background-color:#0ff; transform:none; } |
| matrix(n,n,n,n,n,n) |
Définit la transformation 2D, en utilisant une matrice de 5 valeurs Exemple: #myDIV { background-color : #00f; transformer :matrix(0.86,0.5,-0.5,0.86,0); } |
|
matrix3d (n,n,n,n,n,n,n,n,n,n) |
Définit la transformation 3D, en utilisant une matrice 4 x 4 de 16 valeurs |
| translate(x,y) |
Définit une translation 2D
Exemple: #myDIV { background-color:lightblue; transform:translate(20px,10px); } |
| translate3d(x,y,z) | Définit une translation 3D |
| translateX(x) |
Définit une translation, en utilisant uniquement la valeur de
l'axe des abscisses Exemple: transform :translateX(10px); |
| translateY(y) |
Définit une translation, en utilisant uniquement la valeur de
l'axe y Exemple: transform:translateY(10px); |
| translateZ(z) | Définit une translation 3D, en utilisant uniquement la valeur pour l'axe z |
| scale(x,y) |
Définit une transformation d'échelle 2D Exemple: transform:scaleX(1.1); |
| scale3d(x,y,z) | Définit une transformation d'échelle 3D |
| scaleX(x) |
Définit une transformation d'échelle en donnant une valeur pour
l'axe des abscisses
Exemple: transform:scaleX(1.2); |
| scaleY(y) |
Définit une transformation d'échelle en donnant une valeur pour
l'axe y Exemple: transform:scaleY(1.5); |
| scaleZ(z) | Définit une transformation d'échelle 3D en donnant une valeur pour l'axe z |
| rotate(angle) |
Définit une rotation 2D, l'angle est spécifié dans le paramètre
Exemple: transform:rotate(10deg); |
| rotate3d(x,y,z,angle) | Définit une rotation 3D |
| rotateX(angle) |
Définit une rotation 3D sur l'axe x
Exemple: transform:rotateX(10deg); |
| rotateY(angle) |
Définit une rotation 3D, le long de l'axe y Exemple: transform:rotateY(10deg); |
| rotateZ(angle) |
Définit une rotation 3D, le long de l'axe z Exemple: transform:rotateZ(10deg); |
| skew(x-angle,y-angle) |
Définit une transformation d'inclinaison 2D le long des ordonnées
x et y Exemple: transform:skew(10deg,10deg)); |
| skewX(angle) |
Définit une transformation d'inclinaison 2D sur l'axe x Exemple: transform:skewX(10deg)); |
| skewY(angle) |
Définit une transformation d'inclinaison 2D le long de l'axe y Exemple: transform:skewY(10deg)); |
| perspective(n) | Définit une vue en perspective d'un élément transformé en 3D |