CSS - 画像を回転させ、重ならないように横に並べる方法

質問内容

数枚の画像の一部を270°回転させて並べたいのですが、以下の問題が起こっておりうまくいきません。

li 要素を display: inline-block; で並べたが、要素の間に隙間が空く。margin や padding を0にしても直らない。
回転した画像が他の画像と重なってしまう。
画像を下端に揃えたい。現状では中央で揃っている。

いろいろ調べてはみたものの解決できないので、わかる方いましたら教えて下さい。
よろしくおねがいします。

環境

Chrome 86

ソースコード

html
1<!DOCTYPE html>
2
3<head>
4    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
5    <style>
6        .Block {
7            display: inline-block;
8            padding: 10;
9        }
10
11        .Block li {
12            display: inline-block;
13            vertical-align: bottom;
14            margin: 0;
15            padding: 0;
16        }
17
18        .Rotated {
19            transform: rotate(270deg);
20        }
21    </style>
22</head>
23
24<body>
25    <div class="Blocks">
26        <ul class="Block">
27            <li><img src="./tile.png" class="Rotated" /></li>
28            <li><img src="./tile.png" /></li>
29            <li><img src="./tile.png" /></li>
30        </ul>
31
32        <ul class="Block">
33            <li><img src="./tile.png" /></li>
34            <li><img src="./tile.png" class="Rotated" /></li>
35            <li><img src="./tile.png" /></li>
36        </ul>
37    </div>
38</body>
39
40</html>

使用画像 (tile.png)

行動規範の内容に同意します

回答1件

ベストアンサー

重なってしまっている部分は画像の高さ - 幅が必要ですので、
画像の大きさが動的に変わるような場合には別途処理が必要かと思いますが、
以下のcssでイメージ図のようになるとは思います。

css
1ul {
2  /*隙間を無くす*/
3  font-size:0;
4}
5
6.Block {
7  display: inline-block;
8  padding: 10;
9}
10
11.Block li {
12  display: inline-block;
13  vertical-align: bottom;
14  margin: 0;
15  padding: 0;
16}
17
18.Rotated {
19  /*画像の高さと幅の差分だけずらす*/
20  margin-left : 24px;
21  /*右下を起点に回転させて移動*/
22  transform-Origin: bottom right;
23  transform: rotate(270deg) translate(100%);
24}