H2 - P2019

Développement web

Cours 02 - 2014-09-28

CSS3

Transformations

  • 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é

Connaître la compatibilité

Can I Use : http://caniuse.com/#feat=transforms2d


.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);
}

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

L'arrière d'un élément n'est pas toujours visible (selon navigateur et version)
La propriété backface-visibility permet de gérer ça


.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 environnement 3D homogène avec une perspective commune avec transform-style:preserve-3d

Cette modification doit être appliquée sur chaque élément concerné


.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);
}

Démonstrations