このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
matrix3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>構文
css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)値
matrix3d() 関数は 16 個の値で指定します。列優先の順で記述します。
- a1b1c1d1a2b2c2d2a3b3c3d3
<number>で、線形変換を記述します。- a4b4c4 d4
<number>で、適用する座標変換を記述します。
形式文法
<matrix3d()> =
matrix3d(<number>#{16})
例
つぶれる立方体の例
次の例は、 DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることでmatrix3d() 変換を適用することができます。
HTML
html
<section tabindex="0"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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);}結果
行列変換と拡大縮小の例
もう一つのtransform3d() の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。
HTML
html
<div> 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; /* コンテンツを中央ぞろえ */ 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 { 0% { /* ここでは恒等行列を基礎としています。 以下の行列は、以下の変換を記述しています。 それぞれの X 座標を -50px 移動する それぞれの Y 座標を -100px 移動する それぞれの Z 座標を 0 移動する 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 ) }}結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-matrix3d |
ブラウザーの互換性
関連情報
transform- 独立の座標変換プロパティ:
<transform-function>