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 상자 모델에 의해 제어 되거나 표시 속성 이 table-row, table-row-group, table-header-group, table-footer로 계산되는 요소 -그룹, 테이블 셀 또는 테이블 캡션
- 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;
}
참고 URL : https://stackoverflow.com/questions/4919963/css3-transform-not-working
'Programing' 카테고리의 다른 글
NSString의 처음 세 문자를 얻는 방법? (0) | 2020.08.15 |
---|---|
페이지를 다시로드하지 않는 HTML 버튼을 만드는 방법 (0) | 2020.08.15 |
.NET에서 객체를 UTF-8 XML로 직렬화 (0) | 2020.08.15 |
Javascript 배열 검색 및 문자열 제거? (0) | 2020.08.15 |
무한 생성기에 대한 표현이 있습니까? (0) | 2020.08.15 |