詳解逆引きHTML+CSS辞典

アニメーション - 回転・移動・拡大縮小の基準点を変更したい

登録タグ
Icon comment count 0
Icon stock count 0

回転・移動・拡大縮小の基準点を変更したい

回転させる際の中心をずらしたい/拡大縮小する際の基準点をずらしたい

transform-originプロパティ 原点 基準点

transform-originプロパティを使用すると、transformプロパティでボックスを回転・移動・拡大縮小させる際の基準となる位置(基準点)を変更できます。

では、基準点を変更すると表示結果がどう変わるのかを確認してみましょう。まずはサンプルの回転前の状態から見てください。body要素のマージンを0にして、100ピクセル×100ピクセルのボックスを左上にぴったりとくっつけて配置しています。

<head>
・・・
<style>
body {
  margin: 0;
}
#box {
  width: 100px;
  height: 100px;
  color: white;

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません