Transformations et filtres en CSS

Technologie : CSS

CSS - Filtres et Géométrie

Voici des représentations visuelles des filtres et des modifications géométriques possibles en CSS, il suffit de survoler les images (sur ordinateur) ou cliquer dessus (sur mobile) pour voir les modifications.

Pour utiliser les transformations 3D, il faut définir la perspective avec perspective: 800px; (c'est la valeur utilisée ici). On peut aussi la déplacer avec perspective-origin: 50% 100px; (non utilisé ici).
Il faut aussi utiliser transform-style: preserve-3d; quand on veut définir que les éléments enfants sont positionnés dans l'espace tridimensionnel.

filter (ex: filter: blur(5px);)

blur(5px)

brightness(0.4)

contrast(200%)

grayscale(50%)

hue-rotate(90)

invert(75%)

opacity(25%)

saturate(30%)

sepia(60%)

hue-rotate(180) blur(2px)

Translations - transform: translate (ex : transform: translate(120px, 50%);)

(10px, 5px)

X(10px)

Y(5px)

3d(10px, 5px, 50px)

Rotation - transform: rotate (ex : transform: rotate(0.5turn);)

X(45deg)
ou
3d(1, 0, 0, 45)

Y(45deg)
ou
3d(0, 1, 0, 45)

Z(45deg)
ou
3d(0, 0, 1, 45

transform-origin: bottom left
+
Z(45deg)

3d(1, 1, 0, 45deg)

3d(1, 0, 1, 45deg)

3d(0, 1, 1, 45deg)

Changement d'échelle - transform: scale (ex : transform: scale(2, 0.5);)

(0.5, 0.5)

(0.5, 1)
ou
X(50%)

(1, 05)
ou
Y(50%)

3d(0.5, 0.5, 0.5)

Distorsions - transform: skew (ex : transform: skew(30deg, 20deg);)

(15deg, 15deg)

(15deg)
ou
X(15deg)

Y(15deg)