2018-10-26

CSS3 transform translate系まとめ

CSS transform

transform: translate 系まとめ

transform: に組み合わせる translate 系の関数。
x, y は普通に効くけど z 座標はブラウザによって表示が異なります。

使える関数

  • translate(x, y=0)
  • translateX(x)
  • translateY(y)
  • translateZ(z)
  • translate3d(x, Y=0, z=0)

transform 系の要素について

適用する要素のpositionabsoluteにする必要があります。

検証サンプル

わかりやすいようにアニメーションしていますが、下記の CSS のままではアニメーションしません。

translate(x, y = 0)

y が未指定のときは 0 扱いです。

/* x方向に20px, y方向に10px */  
.translate {  
  transform: translate(20px, 10px);  
}  

translateX(x)

そのまんま、x 座標の移動。translateYtranslateZも同様です。

/* x方向に20px */  
.translateX {  
  transform: translateX(20px);  
}  

translate3d(x, y = 0, z = 0)

x,y,z 座標の移動。y, z が未指定の場合は 0 扱いです。
赤いブロックはz=10pxなのですが、紫のブロックがz=20pxに移動しても変化はありません。

<div class="div-frame">  
  <svg><rect width="80" height="80" class="red"></rect></svg>  
  <svg class="translate3d"><rect width="80" height="80"></rect></svg>  
</div>  
/* x,y,z方向に20pxずつ */  
.translate3d {  
  transform: translate3d(20px, 20px, 20px);  
}  
/* 赤いブロックは10px前に出ているはずなのだが。。。 */  
.red {  
  fill: red;  
  transform: translateZ(10px);  
}  

labo link

Translate


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy