How to make rotated elements in a flexbox fixed to the right side of a page?

后端未结

关注

 2  1142

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 u

相关标签:

2条回答

南旧

2021-01-20 02:37

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>

0 讨论(0)

难免孤独

2021-01-20 02:40

I you don't want the width of the text to affect the width of the outer, then use a writing-mode vertical for it.

For the image, it would be better to have an image that doesn't need to be rotated. But, if this is the case, use transform translate and transform origin, just like in 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>

0 讨论(0)