[html] CSS3 변환이 작동하지 않음
메뉴 항목을 10도 회전하여 변형하려고합니다. 내 CSS는 Firefox에서 작동하지만 Chrome 및 Safari에서 효과를 복제하지 못했습니다. IE가이 CSS3 속성을 지원하지 않는다는 것을 알고 있으므로 문제가되지 않습니다.
다음 CSS를 사용했습니다.
li a {
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
아무도 내가 어디로 잘못 가고 있는지 제안 해 주시겠습니까?
감사.
답변
이것은 HTML / CSS의 나머지 부분을 보지 않고 교육을받은 추측 일뿐입니다.
당신이 적용된 display: block
나 display: inline-block
에 li a
? 그렇지 않다면 시도하십시오.
그렇지 않으면 CSS3 변환 규칙을 li
대신 적용 해보십시오 .
답변
웹킷 기반 브라우저 (Safari 및 Chrome)에서는 -webkit-transform
인라인 요소에서 무시됩니다. . 설정 display: inline-block;
하기 그것이 작동되도록 . 데모 / 테스트 목적으로 음의 각도를 사용하거나 transformation-origin
텍스트가 보이는 영역 밖으로 회전하지 않도록 할 수도 있습니다 .
답변
아무도 관련 문서를 참조하지 않았기 때문에 :
변형 가능한 요소는 다음 범주 중 하나의 요소입니다.
- 레이아웃이 블록 수준 또는 원자 인라인 수준 요소 인 CSS 상자 모델에 의해 제어 되거나 표시 속성 이 테이블 행, 테이블 행 그룹, 테이블 머리글 그룹, 테이블 바닥 글로 계산되는 요소 -그룹, 테이블 셀 또는 테이블 캡션
- SVG 네임 스페이스의 요소이며 transform, ‘patternTransform’또는 gradientTransform 속성이있는 CSS 상자 모델에 의해 관리되지 않습니다.
귀하의 경우 <a>
요소는 inline
기본적으로 있습니다.
display
속성 값을 변경하여 inline-block
요소를 원자 인라인 수준 요소 로 렌더링 하므로 요소가 정의에 따라 ‘변환 가능’하게 됩니다.
li a {
display: inline-block;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
위에서 언급했듯이 이것은 -webkit
IE / FF에서 작동하는 것처럼 보이므로 기반 브라우저 에서만 적용되는 것으로 보입니다 .
답변
특별히 링크 만 회전하려고합니까? LI 태그에서 수행하는 것이 잘 작동하는 것 같기 때문입니다.
Snook 변환 에 따르면 영향을받는 요소는 블록이어야합니다. 그는 또한 필터를 사용하여 IE에서이 작업을 수행 할 수 있도록 몇 가지 코드를 가지고 있습니다 (값에 대한 제한이있는 것처럼 보이지만).
답변
-webkit-transform
더 이상 필요하지 않습니다
ms는 이미 회전을 지원합니다 ( -ms-transform: rotate(-10deg);
).
이 시도:
li a {
...
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-sand-transform: rotate(10deg);
display: block;
position: fixed;
}