CSS3에서 이미지를 계속 회전시키는 방법은 무엇입니까? 【상해】

이 기사에서는 CSS3를 사용하여 이미지 연속 회전 효과를 얻는 방법에 대해 자세히 소개합니다. 웹 페이지를 디자인할 때 이미지 표시와 관련된 다양한 문제에 자주 직면합니다. 둥근 모서리. 디스플레이 및 기타 효과를 확대하려면 그림을 클릭하십시오.

이전 글에서는 이미지의 둥근 모서리를 표시하는 구체적인 방법도 소개했습니다. [CSS에서 이미지의 둥근 모서리 스타일을 어떻게 제어하나요? 】

다음은 CSS3를 사용하여 이미지의 자동 360도 회전을 구현하는 구체적인 방법을 주로 소개합니다

HTML 코드 예제는 다음과 같습니다.

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="CSS3에서 이미지를 계속 회전시키는 방법은 무엇입니까? 【상해】" >
</div>

CSS 이미지 360도 회전에 대한 애니메이션 코드 예제는 다음과 같습니다.

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

위 코드는 테스트를 위해 로컬로 직접 복사하여 붙여넣은 다음 브라우저를 통해 액세스하면 아래와 같은 효과가 나타납니다.

이미지 업로드 크기 제한으로 인해 , gif 스크린샷이 압축되어 이미지가 회전하지 못할 수 있습니다. 그러나 일반적인 상황에서는 지정된 시간 속도에 따라 회전합니다. 여기서 애니메이션 속성에 주목해야 합니다. 이 속성은 모든 애니메이션 속성의 약어 속성입니다. 이미지가 360도 회전 애니메이션 효과를 얻을 수 있도록 img 이미지에 변환 및 애니메이션 스타일 속성을 추가했습니다.

CSS 애니메이션 사진의 자동 회전 효과를 얻는 방법은 위에서 언급한 바와 같습니다. CSS의 변환 및 애니메이션 속성을 익히기만 하면 대부분의 애니메이션 효과를 얻을 수 있습니다. 그들의 원칙은 기본적으로 동일합니다.

그럼 위의 내용은 CSS3를 사용하여 그림을 자동으로 360도 회전시키는 애니메이션 효과를 얻는 구체적인 방법입니다. 그것은 확실한 참고 가치를 가지고 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다!

위 내용은 CSS3에서 이미지를 계속 회전시키는 방법은 무엇입니까? 【상해】의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!