CSS3变换旋转文本，固定位置的左，右，垂直居中

我想一个元素在左，一个定位到浏览器窗口的右侧，既包含ul与CSS变换旋转。我已成功地定位.rotate-left及其ul到左侧，但我一直无法将ul内.rotate-right姿势要正确。（它需要从右侧水平线可见左如果变换不支持。）CSS3变换旋转文本，固定位置的左，右，垂直居中

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：

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

演示： http://codepen.io/anon/pen/FtyEG

我已经在这个100% height block with vertical text建。

来源

2013-03-09 michael

我解决了它与清洁的代码了位。

.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%); 
}

演示：http://codepen.io/anon/pen/LHeaB

来源

2013-03-16 20:56:48 michael

这是一个杰出的解决方案，非常感谢你！ – PossessWithin 2017-06-07 16:24:58

我认为我得到或多或少的权利。它将是：

.rotate-right ul { 
    -webkit-transform-origin: 78% 100%; 
    -webkit-transform: rotate(90deg) translate(0%, 0%);

如果您选择ok转换原点，则不需要转换;去78％。将补偿用于Li宽度

来源

2013-03-10 22:25:52 vals

我刚才提到的，我忘了加上'填充：0;''上ul'，对不起。我已经更新了演示。你的解决方案仍然接近寿。垂直约30像素。 – michael 2013-03-11 02:13:06

CSS3变换旋转文本，固定位置的左，右，垂直居中

回答

相关问题