【CSS】90度回転させた子要素を親要素の横端にピッタリくっつける

以下のようにCSSでテキスト（子要素）を90度回転させたうえで親要素の横端にぴったりくっつける方法をメモしておく。子要素は親要素に対して絶対配置（position: absolute）するイメージ。

親要素を用意する

まず親要素（.container）を配置する。ここでは正方形としているが長方形でもOK。

子要素が親要素に対して絶対配置できるように

.container {
  position: relative;
}

を指定しておく。

catnose

左端に90度回転した子要素をくっつける

HTML

<div class="container">
  <div class="fit-left">Left!</div>
</div>

👇 とりあえずこんな感じで親要素の真上にくるように配置してみる。

.fit-left {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
}

👇 そのうえで以下のように子要素の左下の角（オレンジの点）を起点にくるっと90度回転させれば良そうだ。左下の角を起点に回転させるにはtransform-originの値をbottom leftとする。

  .fit-left {
      ...
+    transform: rotate(90deg);
+    transform-origin: bottom left;
  }

👇 これで完成

完成形のCSS

.container {
  width: 200px;
  height: 200px;
  border: solid 2px black;
  position: relative;
}
.fit-left {
  background: rgba(0,0,0,0.1);
  text-align: center;
  /* ここからがポイント */
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  transform: rotate(90deg);
  transform-origin: bottom left;
}

catnose

右端に90度回転した子要素をくっつける

続いて右側にくっつける場合。HTMLはこれ。

HTML

<div class="container">
  <div class="fit-right">Right!</div>
</div>

👇 まず同様に親要素の真上に配置してみる。

.fit-right {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
}

👇 今度は子要素を右下を起点にして-90度回転させれば良さそう。右下を起点にするにはtransform-originの値をbottom rightとする。

  .fit-left {
      ...
+    transform: rotate(-90deg);
+    transform-origin: bottom right;
  }

👇 これで完成

完成形のCSS

.container {
  width: 200px;
  height: 200px;
  border: solid 2px black;
  position: relative;
}

.fit-right {
  background: rgba(0,0,0,.1);
  text-align: center;
  /* ここからがポイント */
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

このスクラップは2022/07/08にクローズされました