Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

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

パンくず

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

概要

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

プロパティ名

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

内容

2D変形を行います

設定値

matrix(数値, 数値, 数値, 数値, 数値, 数値)

設定値名 設定値内容
1番目 水平方向の縮尺
2番目 垂直方向の傾斜率
3番目 水平方向の傾斜率
4番目 垂直方向の縮尺
5番目 水平方向の移動距離
6番目 垂直方向の移動距離

サンプル

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

完成画面のキャプチャ