matrix3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

matrix3d() は CSS の関数で、 4x4 の 3D 同次変換行列を定義します。 結果は データ型になります。

試してみましょう

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
);

構文

matrix3d() 関数は 16 個の値で指定します。列優先の順で記述します。

css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

値

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3

で、線形変換を記述します。

a4 b4 c4 d4

で、適用する座標変換を記述します。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
この変換は 3D 空間に適用され、平面で表現することはできません。 一般的な 3D アフィン変換は、変換が線形座標変換ではないので、直交座標行列を使用して表現することはできません。 (a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4)

例

つぶれる立方体の例

次の例は、 DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで matrix3d() 変換を適用することができます。

HTML

html

  
1

  
2

  
3

  
4

  
5

  
6

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

  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?

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

ブラウザーの互換性

関連情報