Transformation
Introduction
Les transformations sont un moyen de changer la forme et la position des éléments HTML
sans modifier le flux normal de la page Web. Elles sont utiles, surtout si utilisé conjointement
avec les transitions ou les animations pour déplacer ou modifier des éléments de façon
agréable à l'écran. Dans ce document, nous survolerons les transformations de base que CSS
nous permet de faire.
Les transformations utilisent des calculs matriciels pour générer les modifications. Par
conséquant, ces transformations sont généralement calculé par le processeur graphique de
votre ordinateur (GPU) pour de meilleurs performance.
Syntaxe
La syntaxe de base d'une transformation est la suivante:
CSS
.selecteur {
transform : [fonction-transformation]
}
Il existe plusieurs fonctions de transformations déjà intégré dans les navigateurs. Nous
utiliserons majoritairement ces fonctions déjà établies, donc voici une liste des fonctions que
vous utiliserez le plus souvent.
CSS
.none {
transform : none;
}
.translate {
transform : translate ( 25px , 10px );
}
.scale {
transform : scale ( 1 , . 5 );
}
Introduction
Les transformations sont un moyen de changer la forme et la position des éléments HTML
sans modifier le flux normal de la page Web. Elles sont utiles, surtout si utilisé conjointement
avec les transitions ou les animations pour déplacer ou modifier des éléments de façon
agréable à l'écran. Dans ce document, nous survolerons les transformations de base que CSS
nous permet de faire.
Les transformations utilisent des calculs matriciels pour générer les modifications. Par
conséquant, ces transformations sont généralement calculé par le processeur graphique de
votre ordinateur (GPU) pour de meilleurs performance.
Syntaxe
La syntaxe de base d'une transformation est la suivante:
CSS
.selecteur {
transform : [fonction-transformation]
}
Il existe plusieurs fonctions de transformations déjà intégré dans les navigateurs. Nous
utiliserons majoritairement ces fonctions déjà établies, donc voici une liste des fonctions que
vous utiliserez le plus souvent.
CSS
.none {
transform : none;
}
.translate {
transform : translate ( 25px , 10px );
}
.scale {
transform : scale ( 1 , . 5 );
}
