translate関数


解説

translate関数はtransform属性に指定して要素の表示位置を変更します。

書式は次の通りで、dxに水平方向の移動量、dyに垂直方向の移動量を指定します。


    style="transform: translate(dx, dy)"
  

次の例は<img>要素の画像の倍率を指定する例です。


  <p>
    <label>オリジナル</label><br />
    <img src="../img/dogs.jpg" />
  <div style="transform: translate(170px, -160px)">
    <label>translate(170px, -160px)</label><br />
    <img src="../img/dogs.jpg">
  </div>
  <div style="transform: translate(350px, -300px)">
    <label>translate(350px, -300px)</label><br />
    <img src="../img/dogs.jpg">
  </div>
  </p>
  

これは次のように表示されます。






CSS目次 inserted by FC2 system