如何使在flexbox中旋转的元素固定在页面右侧？

Question

我想创建一个小型垂直文本“水印”背景，它沿着一些reveal.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>

我猜测原因是基线放置的计算是基于旋转前的项目版本进行的，然后它们被旋转到你在那里看到的位置。
如何正确处理这种情况？有没有一种方法可以创建一个元素，在旋转发生后计算其位置的几何形状？

- Paul

Answer 1

调整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>

- Temani Afif

---

嗯...这似乎对我为此示例制作的MWE有效，但出于某种原因，它并不适用于我的实际用例。您可以详细解释一下这是如何工作的，以便我可以尝试进行调试吗？ - Paul

@Paul，默认情况下，变换原点是您元素的中心...当您更改它时，您定义了旋转元素的起始位置，然后使用100％的平移将调整位置...也许您可以共享您的完整代码以查看问题？ - Temani Afif

我认为目前它太复杂了。几天后，我会尝试制作一个具有病态行为的实际MWE。 - Paul

Answer 2

如果您不想让文本的宽度影响外部的宽度，则可以为其使用writing-mode垂直排列。

对于图像，最好使用不需要旋转的图像。但是，如果必须旋转，请使用transform translate和transform origin，就像Temani Afif的答案中所示。

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>

- vals