CSS3新要素 | 2D 3D 変形 | transform:matrix3d

パンくず

CSS3新要素
2D 3D 変形
transform:matrix3d

概要

3D変形を行うtransform:matrix3dについて説明します

プロパティ名

transform:matrix3d
※2012/03/26現在、ベンダープリフィックスが必要

内容

3D変形を行います

設定値

matrix3d(数値*16)

matrix3d(
x1,y1,z1,1,
x2,y2,z2,2,
x3,y3,z3,3,
x4,y4,z4,4
)

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transform:matrix3d</title>
    <style type="text/css">
    p#container {
      border-style:solid;
      border-width:1px;
      border-color:#000;
      background-color:gray;
      width:500px;
      height:300px;
    }
    img#matrix3d_sample {
      transform: matrix3d(
        2,0.2,0,0,
        0,0.5,0,0,
        0,0,4,0,
        100,50,25,1);
      -webkit-transform: matrix3d(
        2,0.2,0,0,
        0,0.5,0,0,
        0,0,4,0,
        100,50,25,1);
      -moz-transform: matrix3d(
        2,0.2,0,0,
        0,0.5,0,0,
        0,0,4,0,
        100,50,25,1);
      -ms-transform: matrix3d(
        2,0.2,0,0,
        0,0.5,0,0,
        0,0,4,0,
        100,50,25,1);
      -o-transform: matrix3d(
        2,0.2,0,0,
        0,0.5,0,0,
        0,0,4,0,
        100,50,25,1);
    }
    </style>
  </head>
  <body>
  <p id="container">
    <img id="matrix3d_sample" src="transform-matrix3d.png" alt="" />
  </p>
  </body>
</html>