CSS3의 변형을 사용하여 회전 된 고정 위치 HTML 블록을 윈도우의 오른쪽에 정렬합니다. rotate (-90deg)

고정 된 위치의 텍스트 블록을 90도 회전 한 다음 오른쪽에 정렬 할 수 있습니까? 창문 쪽?CSS3의 변형을 사용하여 회전 된 고정 위치 HTML 블록을 윈도우의 오른쪽에 정렬합니다. rotate (-90deg)

일부 코드는 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 : 구글 크롬 14.0.835.163에서

* { 
    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 
}

<div>가 오른쪽에 정렬되지 않습니다. 변환/회전은 정렬 후에 수행되기 때문에 (예상되는 동작 임) 의심 스럽습니다. 그러나 HTML/CSS를 사용하여 변형 된/회전 된 텍스트 블록을 창의 오른쪽에 정렬하는 방법이 있습니까?

읽어 주셔서 감사합니다.

출처

2011-09-20 Brian M. Hunt

사용 transform-origin를 사용할 수 있습니다

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

는 your updated jsfiddle를 참조하십시오.

출처

2011-09-20 21:47:26 Alex

최고 고맙습니다. –

Boo boo. 특정 문제에 대한 특정 솔루션. 일반 답변 없음. 나는 근원 가치로 놀고 있었지만 아무 쓸모가 없었다. 자세한 내용은 https://developer.mozilla.org/en/CSS/transform-origin –

방금 벽을 통해 구멍을 뚫어 구해 줬습니다. –

당신은 동적으로 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는 transform 속성을가집니다 : rotate (-90deg);

출처

2013-05-26 18:59:53 vasava

CSS3의 변형을 사용하여 회전 된 고정 위치 HTML 블록을 윈도우의 오른쪽에 정렬합니다. rotate (-90deg)

답변

관련 문제