Développement web
Cours 05
Transformations CSS
- Propriété transform
- Arrivée avec le CSS3
- Compatible avec tous les navigateurs récents
- Permet de faire diverses transformations sur l'élément sélectionné tel qu'un déplacement, une rotation, un redimensionnement, etc.
Les exemples qui suivent sont animés dans un but de comparaison
La transformation n'est pas une animation !
Transformations de base
Scale
scale(x, y) où x et y sont des multiplicateurs
.element
{
transform: scale(3, 0.5);
}
ScaleX
scaleX(x) où x est un multiplicateur
.element
{
transform: scaleX(3);
}
ScaleY
scaleX(y) où y est un multiplicateur
.element
{
transform: scaleY(0.5);
}
Translate
translate(x, y) où x et y sont des distances
(px, %, em, ...)
.element
{
transform: translate(200px, 50px);
}
TranslateX
translateX(x) où x est une distance (px, %, em, ...)
.element
{
transform: translateX(200px);
}
TranslateY
translateY(y) où y est une distance (px, %, em, ...)
.element
{
transform: translateY(50px);
}
Rotate
rotate(a) où a est un angle (deg, rad)
.element
{
transform: rotate(70deg);
}
Skew
skew(x, y) où x et y sont des angles (deg, rad)
.element
{
transform: skew(-50deg, 10deg);
}
SkewX
skewX(x) où x est un angle (deg, rad)
.element
{
transform: skewX(-50deg);
}
SkewY
skewY(y) où y est un angle (deg, rad)
.element
{
transform: skewY(10deg);
}
Centre de la transformation
Il est possible de changer le centre de la transformation à l'aide de transform-origin
.element
{
transform-origin: 0 0;
transform: rotate(-70deg);
}
Centre de la transformation
.element
{
transform-origin: 50% 50%;
transform: rotate(-70deg);
}
Centre de la transformation
.element
{
transform-origin: 100% 100%;
transform: rotate(-70deg);
}
Combiner des transformations
Il suffit de les séparer par des espaces
.element
{
transform: rotate(90deg) translateX(100px);
}
Combiner des transformations
L'ordre des transformations importe
.element
{
transform: translateX(100px) rotate(90deg);
}
Compatibilité
Étapes à suivre vis-à-vis de la compatibilité
Version préfixée pour une meilleure compatibilité
.element
{
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
}
Transformations 3D
:)
rotateY
rotateY(y) où y est un angle (deg, rad)
.element
{
transform: rotateY(250deg);
}
Par défaut, la rotation va sembler plate, sans perspective.
Pour lui rajouter de la perspective, il faut mettre l'élément dans un container et, en CSS, modifier sa propriété perspective.
.container
{
perspective: 800px;
}
.element
{
transform: rotateY(250deg);
}
rotateX
rotateX(x) où x est un angle (deg, rad)
.element
{
transform: rotateX(250deg);
}
translateZ
translateZ(z) où z est une distance (px, %, em, ...)
.element
{
transform: translateZ(100px);
}
scaleZ
scaleZ(z) où z est un multiplicateur
.element
{
transform: scaleZ(2);
}
Pas de différence ? C'est normal
scale3d
scale3d(x, y, z) où x, y et z sont des multiplicateurs
.element
{
transform: scale3d(2, 1.7, 1.5);
}
Backface
Par défaut, l'arrière d'un élément est visible (sauf sur certains vieux navigateurs)
La propriété backface-visibility permet de contrôler cette visibilité
.element-1
{
backface-visibility: hidden;
}
.element-2
{
backface-visibility: visible;
}
Perspective
Il est possible de changer la perspective de l'élément directement.
À éviter pour une perspective homogène entre les différents éléments.
La perspective doit être avant la transformation.
.element
{
transform: perspective(800px) rotateX(70deg);
}
Perspective
Il est possible de propager la perspective de manière à obtenir un espace 3D homogène avec une perspective commune avec transform-style: preserve-3d
Cette modification doit être appliquée sur le parent dont les enfants doivent partager le même espace 3D
.element
{
transform-style: preserve-3d;
}
Matrices
Il est possible d'appliquer des matrices de transformation.
En savoir plus pour les matheux et les curieux.
.element
{
transform: matrix(1, 0.5, 0.5, 1, 0, 0);
}