CSS3 360도 이미지 회전이 작동하지 않는 이유는 무엇입니까?

CSS3 애니메이션 회전

이미지를 360도 회전하려고 시도하는 동안 CSS에 문제가 발생했습니다. 제공된 CSS 코드에는 키프레임 내에 구문 오류가 포함되어 있어 애니메이션이 실행되지 않는 것으로 보입니다. 문제의 세부 사항을 조사하고 필요한 수정 사항을 제공하겠습니다.

구문 오류는 키프레임 선언 내의 'from' 및 'to' 속성에 있습니다. 최신 브라우저의 경우 변환 속성 'transform'은 '-webkit-transform' 및 '-moz-transform'과 같은 공급업체 접두사보다 더 효과적으로 작동합니다. 게다가 'from' 대신 'to' 속성을 100% 정의해야 합니다.

수정된 CSS 코드는 다음과 같습니다.

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

수정된 코드에서 'from' 속성은 이 제거되었으며 'to' 속성의 변형 값이 'rotate(360deg)'로 업데이트되었습니다. 또한 키프레임 규칙은 이제 공급업체 접두사 없이 '변환'만 사용합니다.

이 수정된 CSS는 애니메이션 문제를 해결하여 이미지가 360도 부드럽게 회전할 수 있도록 합니다.

위 내용은 CSS3 360도 이미지 회전이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!