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.
matrix3d() は CSS の関数で、 4x4 の 3D 同次変換行列を定義します。 結果は <transform-function> データ型になります。
試してみましょう
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> 構文
matrix3d() 関数は 16 個の値で指定します。列優先の順で記述します。
css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) 値
例
つぶれる立方体の例
次の例は、 DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで 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: #fff; } .front { background: rgba(90, 90, 90, 0.7); transform: translateZ(50px); } .back { background: rgba(0, 210, 0, 0.7); transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(210, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 210, 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(210, 210, 0, 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(210, 0, 210, 0.7); transform: rotateX(-90deg) translateZ(50px); } 結果
行列変換と拡大縮小の例
もう一つの transform3d() の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。
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; /* より良いデモンストレーションのためのアニメーションの設定 */ animation: MotionScale 2s alternate linear infinite; } @keyframes MotionScale { from { /* ここでは恒等行列を基礎としています。 以下の行列は、以下の変換を記述しています。 それぞれの X 座標を -50px 移動する それぞれの Y 座標を -100px 移動する それぞれの Z 座標を 0 移動する 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 |
