matrix3d()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La fonction CSS matrix3d() définit une transformation 3D sous forme de matrice homogène 4x4.
Son résultat est un type de donnée <transform-function>.
Exemple interactif
transform: matrix3d(
-0.6,
1.34788,
0,
0,
-2.34788,
-0.6,
0,
0,
0,
0,
1,
0,
0,
0,
10,
1
);
transform: matrix3d(
0.5,
0,
-0.866025,
0,
0.595877,
1.2,
-1.03209,
0,
0.866025,
0,
0.5,
0,
25.9808,
0,
15,
1
);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Syntaxe
css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Valeurs
La fonction matrix3d() est définie avec 16 valeurs. Les valeurs sont données selon l'ordre colonne principale.
- a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
Nombres (
<number>) décrivant la transformation linéaire. - a4 b4 c4 d4
-
Nombres (
<number>) décrivant la translation à appliquer.
| Coordonnées cartésiennes sur ℝ^2 (angl.) | Coordonnées homogènes sur ℝℙ^2 | Coordonnées cartésiennes sur ℝ^3 (angl.) | Coordonnées homogènes sur ℝℙ^3 (angl.) |
|---|---|---|---|
| Cette transformation s'applique à l'espace 3D et ne peut pas être représentée sur le plan. | Une affinité mathématique 3D générique ne peut pas être représentée par une matrice en coordonnées cartésiennes, car les translations ne sont pas des transformations linéaires. |
|
|
Syntaxe formelle
<matrix3d()> =
matrix3d( <number>#{16} )
Exemples
Exemple d'écrasement de cube
L'exemple suivant montre un cube 3D créé à partir d'éléments DOM et de transformations, qui peut être survolé ou sélectionné pour appliquer une transformation matrix3d().
HTML
html
<section id="example-element" tabindex="0">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
CSS
css
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
margin: 50px auto;
}
#example-element:hover,
#example-element:focus {
transform: rotate3d(1, 1, 1, 30deg)
matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
Résultat
Exemple de déplacement et de mise à l'échelle de matrice
Autre exemple avec matrix3d(), qui met en œuvre une animation combinée de déplacement et de mise à l'échelle.
HTML
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
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 {
0% {
/*
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%
*/
/* prettier-ignore */
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
-50, -100, 0, 1.1
);
}
50% {
/* prettier-ignore */
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 0.9
);
}
100% {
/* prettier-ignore */
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
Voir aussi
- La propriété
transform - Propriétés individuelles de transformation :
- Le type de donnée
<transform-function>