CSS3 rotate는 요소가 겹치도록 요소를 렌더링합니다.

제목에서 설명하는 것처럼 일부 CSS3 항목에 문제가 있습니다. 내 웹 사이트에서 나는 내부 똑바로 내용을 유지하기 위해 article '의 (간결 남겨 플러스 세 가지 브라우저 공급 업체 접두사)를CSS3 rotate는 요소가 겹치도록 요소를 렌더링합니다.

article { 
    transform: rotate(1deg) 
}

이의

의 몇 가지를 사용 (단지 배경은 회전은) 내가 다시 (그들은 블로그 게시물이야) p 년대 때로는 부동 이미지 내부의 몇 일반적으로 거기에 기사 내부

article > * { 
    transform: rotate(-1deg)'; 
}

를 사용하여 제품 내부의 모든 요소를 회전 할 수 있습니다. 그러나, 나는 오른쪽과 같이 이미지를 떠 때 (이 뜨기 때문에)

는

<article> 
    <p> 
    <a href="#"> 
     <img src="x.jpg" style="float: right" /> 
    </a> 
    </p> 
    <p>Content here</p> 
</article>

두 번째 <p> 이미지의 왼쪽에 끝날 것입니다하지만 블록 레벨 요소이기 때문에 그것은 전체 폭을 차지합니다 article 및 이 중복되어 링크가 일부 장소에서 클릭 할 수 없게 만드는 부동 이미지입니다. transform: rotate을 비활성화하면 이런 일이 발생하지 않으므로 회전이 렌더링되는 방식과 관련이 있다고 생각합니다. 이 문제는 Chrome 및 FireFox에서 발생하며 IE는 테스트하지 않은 회전 및 Opera를 지원하지 않습니다.

누구나 수정 방법을 알고 계십니까?

(예 : http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)

출처

2010-11-24 Stephan Muller

안녕, 내 의견은 다음과 같습니다 단락 내부가 아닌 주요 사업부 내부 이미지를 넣는 이유는 무엇입니까? – Mauro

어떤 버전의 Firefox를 사용하고 있습니까? 위에서 언급 한 예제 사이트는 Mac OS X에서 버전 3.6.12로 멋지게 보입니다. – z00bs

이미지는 WordPress에 의해 단락에 넣어 지므로 멈출 수 없습니다. 무효 한 것도 없으며 회전만으로는 제대로 작동하지 않습니다. @ z00bs, 괜찮아 보이지만 이미지 위로 마우스를 이동하면 일부 지점에서만 손 모양의 커서가 나타납니다. –

그래서,이 버그를 추적 조사에 가고, 난 당신이 CSS transform 특성 (국한되지 회전)를 사용할 때 다시 렌더링 것을 발견했다. 떠 다니는 요소 다음에 오는 요소는 겹치지 않고 그 아래로 흐르게하는 것을 알고 있습니다. (내용은 떠 다니지 만 단락의 배경은 여전히 들어있는 요소의 전체 너비에 걸쳐 부유 요소 뒤에 있습니다.)

그러나 요소가 회전하는 경우 브라우저는 부동 요소를 고려하지 않습니다. 회전 된 요소는 유동 요소와 겹칠 것입니다. DOM에서 회전 된 요소 앞에 오는 비교적/절대적으로 배치 된 요소에 대해서도 마찬가지입니다. 그들은 너무 중첩된다.

일부 테스트 케이스 : jsFiddle

출처

2010-11-25 13:38:06

그리고 2014 년 Chrome에서이 문제가 여전히 발생하고 있습니다. Firefox에서는이 문제가 해결되어 회전 된 이미지가 표시됩니다. Z 지수에 따라 –

CSS3 rotate는 요소가 겹치도록 요소를 렌더링합니다.

답변

관련 문제