html文字上下的位置,CSS3变换旋转文本,左右固定位置,垂直居中

我正在尝试将一个元素放置在浏览器窗口的左侧和右侧,两个元素都包含一个带有CSS转换旋转的ul.我已经设法将.rotate-left及其ul定位在左侧,但我无法将ul定位在.rotate-right右侧. (如果不支持变换,则需要在从右到左的水平线上可见.)

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：

• left
• left
• left

• right
• right
• right

–