[html] CSS3 변환이 작동하지 않음

Program / 글쓴이

메뉴 항목을 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 변환 모듈 레벨 1-용어-변환 가능한 요소

변형 가능한 요소는 다음 범주 중 하나의 요소입니다.

  • 레이아웃이 블록 수준 또는 원자 인라인 수준 요소 인 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);
}

위에서 언급했듯이 이것은 -webkitIE / 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;
    }

답변