Question

是否可以将固定位置的文本块旋转90度，然后将其与窗口的右侧齐平对齐？

我有一些代码demonstrates the problem on jsFiddle。代码是：

HTML：

<html><body>
<div>This is not flush with the right.</div>
<p>This is flush<br/> with the right</p>
</body></html>

CSS：

* {
  margin: 0px;
  padding: 0px;  
}

div {
    position: fixed;
    -webkit-transform: rotate(-90deg);
    right: 0px;
    top: 50%;
    background-color: pink;
}

p {
    position: fixed;
    right: 0px;
    background-color: yellow;
    top: 100px
}

在Google Chrome 14.0.835.163中，<div>未与右侧对齐。我怀疑这是因为变换/旋转是在对齐后执行的（这是预期的行为）。但是，有没有办法使用HTML / CSS将变换/旋转的文本块对齐到窗口的右侧？

感谢您的阅读。

Answer 1

使用可以使用transform-origin：

-webkit-transform-origin: 100% 100%;

请参阅your updated jsfiddle。

Answer 2

您可以动态计算ID：

$(".boktlacidlo").each(function() {
    var text = $(this).prev()
    $(this).width(text.height())
    var padding = Number(text.css('padding-top').replace('px',''))
    var w = Number($(this).width()) +2*padding
    var h = Number($(this).height()) +2*padding
    var s = w+h 
    $(this).css({'transform-origin':h/s/100+'% '+w/s/100+'%', 
                 'msTransformOrigin':Math.round(h/s/100)+'%           '+Math.round(w/s/100)+'%',
                 'margin-top':w, 
                 'margin-right':-w+h-1});

我不知道，为什么我计算比例，但它确实有效。类.boktlacidlo具有属性变换：rotate（-90deg）;

使用CSS3的变换将旋转的固定位置HTML块与窗口的右侧对齐：rotate（-90deg）

2 个答案: