CSS CSS3变换旋转文本，左右固定位置，垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15306032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transform rotate text, fixed position left and right, vertically centered
提问by michael
I'm trying to position one element to the left and one to the right of the browser window, both contains an ulwith CSS transform rotate. I have managed to position .rotate-leftand its ulto the left, but I have been unable to position the ulinside .rotate-rightto the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.)
我试图将一个元素放置在浏览器窗口的左侧和一个右侧，两者都包含一个ul带有 CSS 变换的旋转。我已经设法将.rotate-left其定位ul到左侧，但我无法将ul内部定位.rotate-right到右侧。（如果不支持转换，它需要在从右到左的水平线上可见。）
CSS:
CSS：
.rotate-left ul li,
.rotate-right ul li {
display: inline;
}
.rotate-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-left ul {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
}
.rotate-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-right ul {
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(90deg) translate(-50%, 50%);
-moz-transform: rotate(90deg) translate(-50%, 50%);
}
HTML:
HTML：
<div class="rotate-left">
<ul>
<li>left</li>
<li>left</li>
<li>left</li>
</ul>
</div>
<div class="rotate-right">
<ul>
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
-
——
Demo: http://codepen.io/anon/pen/FtyEG
演示：http: //codepen.io/anon/pen/FtyEG
I have built upon this 100% height block with vertical text.
回答by michael
I solved it and cleaned the code up a bit.
我解决了它并清理了一些代码。
.left,
.right {
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
}
.left {
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
.right {
right: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(90deg) translate(50%, 50%);
-moz-transform: rotate(90deg) translate(50%, 50%);
-ms-transform: rotate(90deg) translate(50%, 50%);
-o-transform: rotate(90deg) translate(50%, 50%);
transform: rotate(90deg) translate(50%, 50%);
}
回答by vals
I think that I get it more or less right. It would be:
我认为我或多或少是正确的。这将是：
.rotate-right ul {
-webkit-transform-origin: 78% 100%;
-webkit-transform: rotate(90deg) translate(0%, 0%);
You don't need to translate if you choose ok the transform origin; going to 78% would be to compensate for the li width
如果选择确定转换原点，则不需要翻译；达到 78% 将补偿 li 宽度
