パンくず
CSS3新要素
2D 3D 変形
transform:translate
概要
要素の表示位置を移動させるtransform:translateについて説明します
プロパティ名
transform:translate()
transform:translateX()
transform:translateY()
transform:translateZ()
transform:translate3d()
※2012/03/26現在、ベンダープリフィックスが必要
内容
要素の表示位置を移動させます
設定値
項目 | 内容 |
translate(x,y) | x=x軸、y=y軸。yは省略可。デフォルトは0 |
translateX(x) | x=x軸 |
translateY(y) | y=y軸 |
translateZ(z) | z=z軸 |
translate3d(x,y,z) | x=x軸,y=y軸,z=z軸 |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transform:translate</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>