CSS3 변환이 작동하지 않음

CSS3 변환이 작동하지 않음

저는 메뉴 항목을 10도 회전시켜 변형을 시도하고 있습니다.제 CSS는 파이어폭스에서 작동하지만 크롬과 사파리에서는 효과를 복제하지 못했습니다.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대신.

웹킷 기반 브라우저(사파리와 크롬)에서,-webkit-transform 인라인 요소에서 무시됩니다. 세트display: inline-block;효과를 내기 위해서 입니다.시연/테스트 목적으로 음각 또는 a를 사용할 수도 있습니다.transformation-origin텍스트가 보이는 영역 밖으로 회전하지 않도록 합니다.

_{아무도 관련 문서를 참조하지 않았기 때문에:}

IMT-2000 3GPP-CSS 변환 모듈 레벨 1 - 용어 - 변환 가능 요소

변환 가능 요소는 다음 범주 중 하나에 있는 요소입니다.

• 블록 레벨 또는 원자 인라인 레벨 요소인 CSS 박스 모델에 의해 레이아웃이 제어되거나 디스플레이 속성이 테이블 행, 테이블 행 그룹, 테이블 헤더 그룹, 테이블 풋터 그룹, 테이블 셀 또는 테이블 캡션으로 계산되는 요소
• 속성 변환, 'patternTransform' 또는 gradientTransform이 있는 CSS 박스 모델에 의해 제어되지 않으며 SVG 네임스페이스에 있는 요소.

당신의 경우,<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에서 작동하는 것처럼 보이기 때문에 기반 브라우저.

제 경우에는 제가 요소에 추가하고 있던 변환을 우선하는 변환이 있는 요소에서 CSS 애니메이션이 실행되고 있었습니다.

링크만 돌리려고 하시는 건가요?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