アイテムとアイテムを重ねる

文字と文字、もしくは文字とイメージを重ねる

は

ま

に

待

ち

だ

<div id="content">
  <div id="itemA"><img src="images/now.png" style="width: 120px;"></div> 
  <div id="itemB"><img src="images/day.png" style="width: 50px;"></div> 
  <div id="itemC"><p class="shippori j2">は</p></div>
  <div id="itemD"><p class="shippori j3"></p></div>
  <div id="itemE"><img src="images/ki-2.png" style="width: 120px;"></div>
  <div id="itemF"><p class="shippori j5">ま</p></div>
  <div id="itemG"><p class="shippori j6">ま</p></div>
  <div id="itemH"><p class="shippori j7">に</p></div>
  <div id="itemI"><img src="images/nagi-2.png" style="width: 140px;"></div>
  <div id="itemJ"><p class="shippori j8 perspective-3">待</p></div>
  <div id="itemK"><p class="shippori j9 perspective-4">ち</p></div>
  <div id="itemL"><p class="shippori j10">だ</p></div>
</div>

#content {
  position: relative; 
  display: grid;
  grid-template-rows: 75px 75px 75px;
  grid-template-columns: 75px 75px 75px 75px;
  justify-content: center; 
  padding-top: 1rem;
}

アイテム(itemA ～ itemL)の全てに絶対配置を指定する値(position: absolute;)を設定する。一部の指定したフォントのシェイプが気に入らないものがあった。それはフォットショップで加工してイメージに仕上げたものを使う。

文字の奥行や遠近や回転を与えるには以下のような CSS を設定する。他に傾斜で使われる skew、matrix がある。

.perspective-1 {
  display: inline-block;
  font-size: 8.5em;
  transform: perspective(150px)
             rotateX(45deg);
}