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.
Die matrix3d()
CSS Funktion definiert eine 3D-Transformation als 4x4 homogene Matrix. Das Ergebnis ist ein <transform-function>
-Datentyp.
Probieren Sie es aus
Syntax
Die matrix3d()
-Funktion wird mit 16 Werten angegeben. Sie sind in Spalten-Major-Reihenfolge beschrieben.
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Werte
- a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
Sind
<number>
s, die die lineare Transformation beschreiben. - a4 b4 c4 d4
-
Sind
<number>
s, die die anzuwendende Translation beschreiben.
Kartesische Koordinaten auf ℝ^2 | Homogene Koordinaten auf ℝℙ^2 | Kartesische Koordinaten auf ℝ^3 | Homogene Koordinaten auf ℝℙ^3 |
---|---|---|---|
Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden. | Eine generische 3D-affine Transformation kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden, da Translationen keine linearen Transformationen sind. |
|
Formale Syntax
Beispiele
Beispiel für Würfel-Komprimierung
Das folgende Beispiel zeigt einen 3D-Würfel, der aus DOM-Elementen und Transformationen erstellt wurde und der bei Hover/Fokus eine matrix3d()
-Transformation anwendet.
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
#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: #fff;
}
.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);
}
Ergebnis
Beispiel für Matrix-Translation und Skalierung
Ein weiteres Beispiel für transform3d()
, das eine animierte Kombination aus Translation und Skalierung implementiert.
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
)
}
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Transforms Module Level 2 # funcdef-matrix3d |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
matrix3d() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
Siehe auch
transform
- Individuelle Transformations-Eigenschaften:
<transform-function>