Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

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

パンくず

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>

完成画面のキャプチャ