Выровняйте повернутый HTML-блок с фиксированной позицией по правой стороне окна с помощью преобразования CSS3: rotate (-90deg) - PullRequest
Новая
       0

Выровняйте повернутый HTML-блок с фиксированной позицией по правой стороне окна с помощью преобразования CSS3: rotate (-90deg)

1 голос
/ 21 сентября 2011

Можно ли повернуть блок текста с фиксированной позицией на 90 градусов, а затем выровнять его по правому краю окна?

У меня есть код, который демонстрирует проблему на 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, чтобы преобразованный / повернутый блок текста был выровнен по правой стороне окна?

Спасибо за чтение.

Ответы [ 2 ]

3 голосов
/ 21 сентября 2011

Использование можно использовать transform-origin: 

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

См. ваш обновленный jsfiddle .

0 голосов
/ 26 мая 2013

Вы можете рассчитать идентификатор динамически: 

$(".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 имеет свойство transform: rotate (-90deg);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...