이미지를 90도 회전하고 div 내에서 절대적으로 위치

여기에 바이올린이 있습니다.이미지를 90도 회전하고 div 내에서 절대적으로 위치

코드는이 단계에서 아주 아주 기본이지만, 기본적으로 여기에 CSS입니다 :

<div class="Box"> 
           <div id="Logo"> 
            <img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px"> 
           </div> 
          </div>

아이디어가 있습니다 : 여기

.Box { 
    width:660px; 
    border: 1px solid #aaaaaa; 
    border-radius: 3px 3px 3px 3px; 
    height:140px; 
} 
#Logo { 
    position:absolute; 
    -moz-transform:rotate(270deg); 
    transform:rotate(270deg); 
    -webkit-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    -o-transform: rotate(270deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    z-index:inherit; 
    zoom:1; 
}

지금까지 HTML입니다 정확히 div 안에 앉아서 이미지를 얻고 5px 여백을두고 왼쪽으로 띄운다. 그것은 다음과 같습니다 있도록 :

enter image description here

출처

2011-07-06 422

왜 모든 문제를 해결하고 실제 이미지를 회전시켜야합니까? – epascarello

투표하셨습니까? – 422

[jQuery plugin] (http://code.google.com/p/jquery-rotate/)을 보셨습니까? 이 경우 유용 할 수 있습니다. 편집 : 잘못된 링크, 난 실제로이 하나의 의미 : http://code.google.com/p/jqueryrotate/ – aroth

로고이 추가보십시오 : 익스플로러 9 인터넷 또한

position:relative; 
float:left; 
top:43px; 
left:-33px;

그들이 당신이 회전 = 4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

를 사용하려면 나타납니다

http://jsfiddle.net/AlienWebguy/mnmc7/21/

출처

2011-07-06 01:56:01 AlienWebguy

감사합니다. 나는 긍정적 인 argghhh의 환호보다는 최상위를하고 있었다. – 422

왜이 숫자가 작동하는지 설명하는 것이 중요하다. 특히 OP에서 언급 한대로 이미지 크기가 변경되는 경우 –

위대한 작품이지만 메인 페이지의 포지셔닝을 여전히 채택하고 있습니다 ... 이유가 없습니다. 내 둥지가 깨끗합니다. 귀하의 바이올린에서 볼 수 있듯이 – 422

#logo a 이 방법으로 원하는 경우 위치의 상단 및 좌측 값 http://jsfiddle.net/mnmc7/13/

출처

2011-07-06 01:57:11 kinakuta

문제는 페이지 상단에 절대적으로 위치하지만 아직 올바르게 중첩되어 있으므로 relative – 422

부모 요소에 상대적인 위치를 지정하려면 부모에 상대적으로 position :을 추가하십시오. 절대 위치 지정은 가장 가까운 위치에있는 부모 위치를 기준으로 배치됩니다. – kinakuta

이제 혼란스러워지고 있습니다. 상위 div (예에 따라)는 상대적 또는 절대 위치 지정없이 페이지에 배치됩니다. 그래서 자식 div (로고가되는 것)는 단지 공을 놀지 않습니다. – 422

이미지를 90도 회전하고 div 내에서 절대적으로 위치

답변

관련 문제