如何在Flexbox中将旋转后的元素固定到页面的右侧？ [英] How to make rotated elements in a flexbox fixed to the right side of a page?

问题描述

我想创建一个小的垂直文本水印背景，该背景沿一些reveal.js幻灯片的右侧运行。我已经了解到我需要使用 transform 来旋转我要垂直运行在页面右侧的所有元素。

问题是似乎很多几何计算发生在 转换之前，结果是我尝试时几何计算不正确使元素与flexbox对齐。这是几乎起作用的基本示例：

  div.outer {位置：固定；最高：0;底部：0正确：0；背景：灰色；显示：flex; flex-flow：列nowrap; justify-content：space-around;}。item {transform：rotation（-90deg）;背景：红色；}  

 < div class = outer >< div class = item style = width：200px>一些文字< / DIV>< IMG类= 项目 SRC =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA / WD / AP + gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD / EnuzNPZjzvZ5w0zMyz / hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43 + 8AgDAMEQQBfN / H4XBYrRHv9xu32w2n06l3HhHheDxitxvx // NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa + / G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz / 1N + qnCqKotA + mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG + L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj + lpENJgZHZPfQ57PJ67XKy6XS + 88IQTO5zP2 + 719oLIPVL / HBwWcbe23UyTxAAAAAElFTkSuQmCC ALT = />< / DIV>  

此问题是外部 div 的宽度是根据未旋转的flexbox元素的宽度，因此元素显示为与页面侧面偏移。

如果我尝试通过更改<$来解决此问题c $ c> align-items 到 flex-end ，结果是每个元素都对准了不同的

  div.outer {位置：固定；最高：0;底部：0正确：0；背景：灰色；显示：flex; flex-flow：列nowrap;证明内容：环绕； align-items：flex-end;}。item {transform：rotation（-90deg）;背景：红色；}  

 < div class = outer >< div class = item style = width：200px>一些文字< / DIV>< IMG类= 项目 SRC =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA / WD / AP + gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD / EnuzNPZjzvZ5w0zMyz / hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43 + 8AgDAMEQQBfN / H4XBYrRHv9xu32w2n06l3HhHheDxitxvx // NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa + / G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz / 1N + qnCqKotA + mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG + L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj + lpENJgZHZPfQ57PJ67XKy6XS + 88IQTO5zP2 + 719oLIPVL / HBwWcbe23UyTxAAAAAElFTkSuQmCC ALT = />< / DIV>  

我猜这是因为计算基线的位置是e根据商品的预旋转版本，然后将它们旋转到您在此处看到的位置。

做这样的事情的正确方法是什么？有什么方法可以创建一个元素，以便在发生旋转之后 对其位置进行几何计算？

解决方案

调整 transform-origin 并依靠翻译而无需更改对齐方式

左侧：

  div.outer {位置：固定;最高：0;底部：0正确：0；背景：灰色；显示：flex; flex-flow：column nowrap;}。item {transform：旋转（-90deg）平移（-100％）; transform-origin：左上方；背景：红色；}  

 < div class = outer >< div class = item style = width：200px>一些文字< / DIV>< IMG类= 项目 SRC =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA / WD / AP + gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD / EnuzNPZjzvZ5w0zMyz / hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43 + 8AgDAMEQQBfN / H4XBYrRHv9xu32w2n06l3HhHheDxitxvx // NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa + / G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz / 1N + qnCqKotA + mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG + L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj + lpENJgZHZPfQ57PJ67XKy6XS + 88IQTO5zP2 + 719oLIPVL / HBwWcbe23UyTxAAAAAElFTkSuQmCC ALT = />< / DIV>  

这是在右侧：

  div.outer {位置：固定；最高：0;底部：0正确：0；背景：灰色；显示：flex; flex-flow：column nowrap;}。item {transform：rotation（-90deg）translationY（-100％）; transform-origin：右上方；背景：红色；}  

 < div class = outer >< div class = item style = width：200px>一些文字< / DIV>< IMG类= 项目 SRC =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA / WD / AP + gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD / EnuzNPZjzvZ5w0zMyz / hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43 + 8AgDAMEQQBfN / H4XBYrRHv9xu32w2n06l3HhHheDxitxvx // NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa + / G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz / 1N + qnCqKotA + mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG + L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj + lpENJgZHZPfQ57PJ67XKy6XS + 88IQTO5zP2 + 719oLIPVL / HBwWcbe23UyTxAAAAAElFTkSuQmCC ALT = />< / DIV>  

I would like to create a small vertical text "watermark" background that runs up the right side of some reveal.js slides. I have gotten as far as the fact that I need to use transform to rotate any elements that I want to run vertically up the length of the right side of the page.

The problem is that it seems that a lot of the geometry calculations occur before transformations occur, and the result is that the geometry gets miscalculated when I try to align the elements with a flexbox. Here is a basic example that almost works:

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>

The problem with this is that the outer div has a width that is calculated based on the width of the non-rotated flexbox elements, and as a result the elements show up offset from the side of the page.

If I try to fix this by changing align-items to flex-end, the result is that each element is aligned to a different

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>

I'm guessing that the reason for this is that the calculations of where to put the baselines are done based on the pre-rotation versions of the items, and then they get rotated into the positions you see there.

What is the correct way to do something like this? Is there any way to create an element where the geometry calculations about its position will be calculated after the rotations take place?

解决方案

Adjust transform-origin and rely on translation without changing the alignement

Here is on the left side :

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>

And here is on the right side:

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>

这篇关于如何在Flexbox中将旋转后的元素固定到页面的右侧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！