Les transformations CSS 2D - FAQ CSS

Introduction aux transformations 2D

Vous trouverez diverses questions sur les feuilles de style CSS qui permettent d'effectuer des transformations CSS3 2D.

Vous trouverez aussi un petit outil pour voir en live les effets des transformations ainsi que le code CSS pour faire une transformation.

Comment faire une transformation en Css?

Pour faire une transformation grâce aux feuilles de style Css

C'est grâce à la propriété transform CSS que vous pourrez effectuer une transformation à un élément HTML.
Il existe plusieurs types de transformation 2D:

Il faut savoir que certaines versions de navigateurs n'acceptent que leur version préfixée :

-moz-transform,
-ms-transform,
-webkit-transform.

Comment faire une transformation de rotation en Css?

Faire une transformation de rotation grâce aux feuilles de style Css

Vous pouvez effectuer une rotation 2D en CSS3 à un élément HTML. Pour cela vous devez utiliser la fonction de transformation CSS rotate().

Exemple d'écriture CSS multi-navigateurs de rotate() :

transform : rotate(60);
-webkit-transform : rotate(60);
-moz-transform : rotate(60);
etc..

Comment faire une transformation d'échelle en Css?

Faire une transformation d'échelle grâce aux feuilles de style Css

Vous pouvez agrandir ou diminuer la taille en 2D d'un élément HTML. Pour cela vous devez utiliser la fonction de transformation CSS scale() ou ses soeurs scaleX() ou scaleY().

Exemple d'écriture CSS multi-navigateurs de scale() :

transform : scale(1,2);
-webkit-transform : scale(1,2);
-moz-transform : scale(1,2);
etc..

Comment faire une transformation de déplacement en Css?

Faire une transformation de déplacement grâce aux feuilles de style Css

Vous pouvez déplacer / décaler en 2D d'un élément HTML. Pour cela vous devez utiliser la fonction de transformation CSS translate() ou ses soeurs translateX() ou translateY().

Exemple d'écriture CSS multi-navigateurs de translate() :

transform : translate(2em, 20px);
-webkit-transform : translate(2em, 20px);
-moz-transform : translate(2em, 20px);
etc..

Comment faire transformation d'inclinaison en Css?

Faire transformation d'inclinaison grâce aux feuilles de style Css

Vous pouvez incliner / obliquer en 2D d'un élément HTML. Pour cela vous devez utiliser la fonction de transformation CSS skew() ou ses soeurs skewX() ou skewY().

Exemple d'écriture CSS multi-navigateurs de skew() :

transform : skew(2em, 20px);
-webkit-transform : skew(2em, 20px);
-moz-transform : skew(2em, 20px);
etc..

Comment positionner le point d'origine?

Spécifier le point d'origine de la transformation grâce aux feuilles de style Css

Chaque transformation CSS se fait à partir d'un point d'origine qui par défaut est le centre de votre élément HTML.
Vous pouvez changer le point d'origine en 2D d'un élément HTML. Pour cela vous devez utiliser la propriété de feuille de style CSS transform-origin.

Exemple d'écriture CSS multi-navigateurs de transform-origin :

transform-origin : 10% 20%;
-webkit-transform-origin : 10% 20%;
-moz-transform-origin : 10% 20%;
etc..