パンくず
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>
完成画面のキャプチャ
