CSS - transform を利用して画像を移動させた場合にできる隙間を埋めたい

質問内容

FlexBox を使って複数の画像を横に並べており、CSS の transform プロパティを利用して一部の画像を回転、移動させています。
移動させて空いた領域 (下画像の赤の領域) の隙間を空かないようにしたいのですが、なにかいい方法はありますでしょうか？
CSS のみの修正では難しい場合、HTML の DOM 構造を変更しても大丈夫です。
よろしくおねがいします。

1つ前の質問: HTML - CSS - 画像を回転させ、重ならないように横に並べる方法｜teratail

環境

Chrome 86

コード

sample.html

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        .hand_and_melded_blocks {
7            width: 500px;
8            height: 100px;
9            display: flex;
10        }
11
12        .hand_tiles {
13            display: flex;
14            align-self: flex-end;
15        }
16
17        .melded_block {
18            display: flex;
19            align-self: flex-end;
20            margin-left: 5px;
21        }
22
23        /* 横倒しになる画像 */
24        .Rotated {
25            margin-left: 14px;
26            transform-origin: bottom right;
27            transform: rotate(270deg) translate(100%);
28        }
29
30        /* 横倒しになる画像の上に乗っかる画像 */
31        .Rotated2 {
32            margin-left: 14px;
33            transform-origin: bottom right;
34            transform: rotate(270deg) translate(200%, -100%);
35        }
36    </style>
37</head>
38
39<body>
40    <div class="hand_and_melded_blocks">
41        <div class="hand_tiles">
42            <img src="tile.png" />
43            <img src="tile.png" />
44            <img src="tile.png" />
45            <img src="tile.png" />
46        </div>
47
48        <div class="melded_block">
49            <img src="tile.png" class="Rotated">
50            <img src="tile.png" />
51            <img src="tile.png" />
52        </div>
53
54        <div class="melded_block">
55            <img src="tile.png" class="Rotated">
56            <img src="tile.png" class="Rotated2">
57            <img src="tile.png" />
58            <img src="tile.png" />
59        </div>
60    </div>
61</body>
62
63</html>

リソース

tile.png

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

回答1件

ベストアンサー

横倒しした時の幅（元の高さ）分、ネガティブマージンで移動させればいいでしょう。

css
1/* 横倒しになる画像の上に乗っかる画像 */
2.Rotated2 {
3  margin-left: 14px;
4  margin-right: -54px; /* 追加 */
5  transform-origin: bottom right;
6  transform: rotate(270deg) translate(200%, -100%);
7}

または、上の横倒しブロックをネガティブマージンで移動させてもいいですね。
こちらの方かシンプルになります。

css
1/* 横倒しになる画像の上に乗っかる画像 */
2.Rotated2 {
3  margin-left: -40px;
4  transform-origin: bottom right;
5  transform: rotate(270deg) translate(200%);
6}

投稿2020/11/15 06:18

編集2020/11/15 06:24

hatena19

総合スコア34084

tiitoi

2020/11/15 06:30

なるほど。マージンを使って調整する方法は思いつきませんでした。迅速なご回答ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSS - transform を利用して画像を移動させた場合にできる隙間を埋めたい

質問内容

環境

コード

リソース

関連した質問