matrix3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
La fonction matrix3d()
décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type <transform-function>
.
Syntaxe
La fonction matrix3d()
s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes.
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Valeurs
- a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
-
Des valeurs de type
<number>
qui sont les coefficients de la matrice définissant la transformation linéaire. a4
b4 c4
-
Les coefficients de type
<number>
qui définissent la translation à appliquer.
Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs <length>
pour les coefficients a4
, b4
et c4
.
Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
---|---|---|---|
Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions. | Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires. |
Exemples
Exemple simple
HTML
<p>toto</p>
<p class="transformation">truc</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
transform: matrix3d(
0.87,
-0.5,
0,
0,
0.5,
0.87,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1
);
background-color: blue;
}
Résultat
Translation et homothétie matricielle
HTML
<div class="foo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>
CSS
html {
width: 100%;
}
body {
height: 100vh;
/* Centering content */
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
}
.foo {
width: 50%;
padding: 1em;
color: white;
background: #ff8c66;
border: 2px dashed black;
text-align: center;
font-family: system-ui, sans-serif;
font-size: 14px;
/* Setting up animation for better demonstration */
animation: MotionScale 2s alternate linear infinite;
}
@keyframes MotionScale {
from {
/*
Identity matrix is used as basis here.
The matrix below describes the
following transformations:
Translates every X point by -50px
Translates every Y point by -100px
Translates every Z point by 0
Scales down by 10%
*/
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1);
}
50% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
}
to {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
}
Résultat
Spécifications
Specification |
---|
CSS Transforms Module Level 2 # funcdef-matrix3d |
Compatibilité des navigateurs
BCD tables only load in the browser