H2 - P2021

Développement web

Cours 01

Transformations CSS

  • Propriété transform
  • Arrivée avec le CSS3
  • Pas compatible avec tous les navigateurs
  • Permet de faire divers 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


.block
{
    transform: scale(3, 1.3);
}

ScaleX

scaleX(x) où x est un multiplicateur


.block
{
    transform: scaleX(3);
}

ScaleY

scaleX(y) où y est un multiplicateur


.block
{
    transform: scaleY(1.3);
}

Translate

translate(x, y) où x et y sont des distances (px, %, em, ...)


.block
{
    transform: translate(200px, 50px);
}

TranslateX

translateX(x) où x est une distance (px, %, em, ...)


.block
{
    transform: translateX(200px);
}

TranslateY

translateY(y) où y est une distance (px, %, em, ...)


.block
{
    transform: translateY(50px);
}

Rotate

rotate(a) où a est un angle (deg, rad)


.block
{
    transform: rotate(70deg);
}

Skew

skew(x,y) où x et y sont des angles (deg, rad)

Ne pas utiliser skew seul !

SkewX

skewX(x) où x est un angle (deg, rad)


.block
{
    transform: skewX(-50deg);
}

SkewY

skewY(y) où y est un angle (deg, rad)


.block
{
    transform: skewY(-50deg);
}

Centre de la transformation

Il est possible de changer le centre de la transformation à l'aide de transform-origin


.block
{
    transform-origin: 0 0;
    transform: rotate(-70deg);
}

Centre de la transformation


.block
{
    transform-origin: 50% 50%;
    transform: rotate(-70deg);
}

Centre de la transformation


.block
{
    transform-origin: 100% 100%;
    transform: rotate(-70deg);
}

Combiner des transformations

Il suffit de les séparer par des espaces


.block
{
    transform: rotate(90deg) translateX(100px);
}

Combiner des transformations


.block
{
    transform: translateX(100px) rotate(90deg);
}

Compatibilité

Étapes à suivre vis-à-vis de la compatibilité

Connaître la compatibilité

CanIUse

http://caniuse.com/#feat=transforms2d

CanIUse

Version préfixée pour une meilleure compatibilité


.block
{
     -webkit-transform: rotate(-70deg); /* Chrome / Safari */
        -moz-transform: rotate(-70deg); /* Firefox */
         -ms-transform: rotate(-70deg); /* Internet Explorer */
          -o-transform: rotate(-70deg); /* Opera */
             transform: rotate(-70deg); /* General */
}

Transformations 3D

:)

rotateY

rotateY(y) où y est un angle (deg, rad)


.block
{
    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 la propriété perspective.


.container
{
    perspective:800px;
}
.block
{
    transform: rotateY(250deg);
}

rotateX

rotateX(x) où x est un angle (deg, rad)


.block
{
    transform: rotateX(250deg);
}

translateZ

translateZ(z) où z est une distance (px, %, em, ...)


.block
{
    transform: translateZ(100px);
}

scaleZ

scaleZ(z) où z est un multiplicateur


.block
{
    transform: scaleZ(2);
}

Pas de différence ? C'est normal

scale3d

scale3d(x, y, z) où x, y et z sont des multiplicateurs


.block
{
    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é


.block-1
{
    backface-visibility: hidden;
}
.block-2
{
    backface-visibility: visible;
}

Perspective

Il est possible de changer l'impact de la perspective. Cela ne concerne que les déformations 3D (évident)

La perspective doit être avant la transformation


.block
{
    transform: perspective(800px) rotateX(90deg);
}

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


.block
{
    transform-style: preserve-3d;
}

Matrices

Il est possible d'appliquer des matrices de transformation.

En savoir plus pour les matheux et les curieux.


.block
{
    transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}

Compatibilité

http://caniuse.com/#feat=transforms3d

CanIUse

Démonstrations