matrix3d()
matrix3d()
は CSS の関数で、 4x4 の三次元同次変換行列を定義します。
結果は <transform-function>
データ型になります。
構文
matrix3d()
関数は 16 個の値で指定します。列優先の順で記述します。
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
値
ℝ^2 のデカルト座標 | ℝℙ^2 の同次座標 | ℝ^3 のデカルト座標 | ℝℙ^3 の同次座標 |
---|---|---|---|
この変換は三次元空間に適用され、平面で表現することはできません。 | 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 |
例
つぶれる立方体の例
次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで matrix3d()
変換を適用することができます。
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: rgba(90,90,90,.7);
transform: translateZ(50px);
}
.back {
background: rgba(0,210,0,.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210,0,0,.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0,0,210,.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210,210,0,.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210,0,210,.7);
transform: rotateX(-90deg) translateZ(50px);
}
結果
行列変換と拡大縮小の例
もう一つの transform3d()
の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。
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
)
}
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 2 # funcdef-matrix3d |
ブラウザーの互換性
BCD tables only load in the browser