web-dev-qa-db-ja.com

変換：翻訳（-50％、-50％）

主人公の画像やフルスクリーンの何かを操作するとき、私は通常、次のビットのCSSを含むテキストまたは画像を見ます：

.item {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

誰かがこのコードが実際に何をしているのか説明してもらえますか？

htmlcsslayout
13
Theodore Steiner

transform: translate(-50%, -50%)が必要な理由は、要素の中心をその親の中心に揃えたいからです。簡単に言えば、それはtranslateX(-50%) translateY(-50%)に要約できます。

  • x軸に沿って幅の50％だけ左に移動し、
  • y軸に沿って、身長の50％だけ上方に移動します

これにより、要素の中心が元の左上隅に効果的に移動します。要素に_left: 50%; top 50%_を設定すると、その左上隅がその親の中心に移動することに注意してください（つまり、視覚的に中央に配置されないことを意味します）。要素をそれぞれ幅と高さの半分だけ左および上に移動すると、その中心が親の中心と一致するようになり、視覚的に水平方向と垂直方向の中心になります。

概念実証として、以下のコードスニペットを参照してください。親の上にカーソルを合わせて、transform: translate(-50%, -50%)を使用して子要素の「ゴースト」を再配置します。

_body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}_
_<div class="parent">
  <div class="child"></div>
</div>_
32
Terry