Как сделать, чтобы повернутые элементы во флексбоксе фиксировались с правой стороны страницы?

Question

Я хотел бы создать небольшой вертикальный текстовый «водяной знак» фона, который проходит по правой стороне некоторых слайдов reve.js.Я дошел до того факта, что мне нужно использовать transform для поворота любых элементов, которые я хочу запустить вертикально вверх по длине правой стороны страницы.

Проблема в том, что кажется, чтомногие геометрические вычисления происходят за до преобразований, и в результате геометрия неправильно рассчитывается, когда я пытаюсь выровнять элементы с помощью flexbox.Вот базовый пример того, что почти работает:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}

.item {
    transform: rotate(-90deg);
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

Проблема заключается в том, что внешняя div имеет ширину, которая рассчитывается на основе ширины неповоротных элементов flexbox, и какВ результате элементы отображаются со смещением от стороны страницы.

Если я попытаюсь это исправить, изменив align-items на flex-end, то результат будет таким, что каждый элемент будет выровнен по-разному

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: flex-end;
}

.item {
    transform: rotate(-90deg);
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

Я предполагаю, что причина этого заключается в том, что расчеты места расположения базовых линий выполняются на основе версий элементов перед вращением,и затем они поворачиваются в позиции, которые вы видите там.

Как правильно сделать что-то подобное?Есть ли способ создать элемент, в котором расчеты геометрии относительно его положения будут вычисляться после вращения?

Answer 1

Если вы не хотите, чтобы ширина текста влияла на ширину external , тогда используйте режим письма по вертикали.

Для изображения было бы лучше иметь изображение, которое не нужно вращать.Но, если это так, используйте transform translate и transform origin, как в Temani Afif answer

div.outer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}

.item {
  writing-mode: vertical-rl;
  background: red;
}

img.item {
  transform: rotate(90deg) translateX(-100%);
  transform-origin: left bottom;
  margin-right: -100px;
}

<div class="outer">
  <div class="item">
    Some text
  </div>
  <img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC"
    alt="" />
</div>

Answer 2

Отрегулируйте transform-origin и полагайтесь на перевод без изменения выравнивания

Вот с левой стороны:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
}

.item {
    transform: rotate(-90deg) translate(-100%);
    transform-origin:top left;
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

А вот с правой стороны:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
}

.item {
    transform: rotate(-90deg) translateY(-100%);
    transform-origin:top right;
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>