Les transformations servent à modifier la forme et la position d’un élément HTML: étirer, faire tourner, etc.
Les transformations ne changent pas le flow du document, autrement dit les éléments autour ignorent les transformations.
On utilise généralement les transformations avec la propriété transition afin de créer des animations fluides (simples).
Définit la ou les transformations à appliquer [CSS3]
Définition:
transform: <transform-function>
Exemple:
{
transition: transform 3s;
}
{
transition: all 2s ease;
&:hover {
transform: rotateY(360deg);
}
}
JSFiddle transformations 2D & 3D
Multiples transformations:
Pour appliquer plusieurs transformations, les lister séparées par un espace.
L’ordre des transformations est important, chaque transformation est calculée par dessus la somme des transformations précédentes. JSfiddle ordre transformations
{
transform: scale(2,1) rotate(60deg);
}
transform-function 2D:
| Fonction | Description |
|---|---|
translate(X, Y) |
Déplace l’élément horizontalement et verticalement |
translateX(<length> | <percentage>) |
Déplace l’élément horizontalement Les pourcentages sont calculés relativement à l'objet en courslui-même et non à son parent : translateX(100%) déplace l'élément à côté de l'endroit où il était (= déplacement de 100% de sa largeur) |
translateY(<length> | <percentage>) |
Déplace l’élément verticalement |
scale(X, Y) |
Redimensionne l’élément en largeur et en hauteur |
scaleX(<number>) |
Redimensionne l’élément en largeur |
scaleY(<number>) |
Redimensionne l’élément en hauteur |
rotate(<angle>) |
Fait tourner l’élément autour d’un point fixe |
skew(<angle>,<angle>) |
Étire l’élément sur la largeur et sur la hauteur |
skewX(<angle>) |
Étire l’élément sur la largeur |
skewY(<angle>) |
Étire l’élément sur la hauteur |
matrix(a1,a2,b1,b2,tx,ty) |
Définit une matrice de transformation 2D Les transformations rotate, skew, etc sont des raccourcis pour les matrices de transformation usuellement utilisées. Outils pour créer sa matrice : Via drag & drop ou via slider Convertir des transformations en matrice |
transform-function 3D:
Les transformations 3D héritent des transformations 2D et ajoutent un troisième axe: Z, qui permet de déplacer les éléments dans l’espace, comme des cartes postales ou des facettes de cube. Exemples de transformations 3D
| Fonction | Description |
|---|---|
perspective(<length>) |
Pour utiliser une transformation 3D, il faut spécifier la perspective. Elle définit la distance de vision par rapport à l'élément : plus la distance donnée est petite, plus l'objet est déformé. Elle se définit
|
translate3d(X, Y, Z) |
Même principe que translate mais avec l’axe Z en plus |
translateZ(<length>) |
Déplace l’élément vers l’avant ou l’arrière |
scale3d(X, Y, Z) |
Même principe que scale mais avec l’axe Z en plus |
scaleZ(<number>) |
Modifie la coordonnée en Z de chaque point de l’élément |
rotate3d(X, Y, Z, <angle>) |
Fait tourner l’élément autour d’un axe |
rotateZ(<angle>) |
Déplace l’élément autour de l’axe Z |
matrix3d(a1,a2,a3,a4, b1,b2,b3,b4, c1,c2,c3,c4, tx,ty,tz,d4) |
Définit une matrice de transformation 3D Même principe que matrix mais avec l'axe Z |
{
transform: rotate3d(0,1,0,60deg);
}
Définit l’origine du repère pour les opérations de transformation [CSS3]
transform-origin: (<length> | <percentage> | left | center | right | top | bottom){1,2}
Par défaut se situe
Exemples transform-origin
Codepen Animation transform-origin
transform-box: border-box | fill-box | view-box
(CSS3)
Définit la boîte de référence utilisée par transform et transform-origin
Uniquement pour les éléments SVG
- border-box : bordure incluse
- fill-box : contenu uniquement
- view-box : utilise la viewBox la plus proche
Définit si les enfants de l’élément doivent être considérés comme étant en 3d ou non [CSS3]
transform-style: flat | preserve-3d
Définit la distance de vision par rapport à l’élément (perspective) [CSS3]
perspective: <length>
Définit la position du point de fuite [CSS3]
perspective-origin: <length> | <percentage> | left | center | right | top | bottom
Par défaut se situe au milieu (50% 50%)
Définit si la face arrière de l’élément est visible ou non [CSS3]
backface-visiblity: visible | hidden