3D/2DCSSプロパティの詳細とデモ

transformプロパティ - [公式(英語)]

様々な関数により、要素を変形させます。 詳細はhttp://www.w3.org/TR/css3-3d-transforms/#transform-functions(英語)で

要素に対して、matrix(マトリクス変形)、translate(表示移動変更)、scale(拡大・縮小)、rotate(回転表示)、skew(傾斜)、perspective(3D変形の遠近効果を調節)など適用することができます。

ブラウザのサポート状況

Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera
× × × ×

プロパティ

none未指定(初期値)
マトリクス変形を適用matrix(水平方向の縮尺, 垂直方向の傾斜率, 水平方向の傾斜率, 垂直方向の縮尺, 水平方向の移動距離, 垂直方向の移動距離)
3Dマトリクス変形を適用matrix3d(水平方向の縮尺, 垂直方向の傾斜率, 数値, 数値, 水平方向の傾斜率, 垂直方向の縮尺, 数値, 数値, 数値, 数値, 数値, 数値, 水平方向の移動距離, 垂直方向の移動距離, 数値, 数値)
表示位置を移動(X、Y)translate(X軸、Y軸)
表示位置を移動(X、Y、Z)translate3d(X軸、Y軸、Z軸)
表示位置を移動(X)translateX(X軸)
表示位置を移動(Y)translateY(Y軸)
表示位置を移動(Z)translateZ(Z軸)
拡大縮小(2軸)scale(X軸、Y軸)
拡大縮小(3軸)scale3d(X軸、Y軸、Z軸)
拡大縮小(X軸)scaleX(X軸)
拡大縮小(Y軸)scaleY(Y軸)
拡大縮小(Z軸)scaleZ(Z軸)
回転角度rotate(角度)
回転方向ベクトルと角度rotate3d(回転ベクトル(X、Y、Z)、角度)
回転角度rotateX(角度)
回転角度rotateY(角度)
回転角度rotateZ(角度)
傾斜角度skewX(傾斜角度)
傾斜角度skewY(傾斜角度)
傾斜角度skew(傾斜角度、傾斜角度)
遠近効果(数値)perspective(遠近効果値)