CSS에서 이미지가 회전하도록 설정하는 방법

CSS에서 이미지가 계속 회전하도록 설정하는 방법: [-webkit-transform:rotate(360deg) animation:rotation;]과 같은 animation 속성과 변환 속성을 사용하여 설정할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

(동영상 공유 학습: css 동영상 튜토리얼)

CSS에서 이미지가 계속 회전하도록 설정하는 방법:

관련 속성:

애니메이션 애니메이션 속성

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

속성 값:

• ani 친구 -name 선택기에 바인딩할 키프레임의 이름을 지정합니다.

• animation-duration 애니메이션이 완료되는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.

• animation-timing-function 애니메이션이 한 주기를 완료하는 방법을 설정합니다.

• animation-delay 애니메이션이 시작되기 전의 지연 간격을 설정합니다.

• animation-iteration-count 애니메이션이 재생되는 횟수를 정의합니다.

• animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

• animation-fill-mode는 애니메이션이 재생되지 않을 때(애니메이션이 완료될 때 또는 애니메이션이 재생을 시작하기 전에 지연되는 경우) 요소에 적용할 스타일을 지정합니다.

• animation-play-state 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.​

• initial 속성을 기본값으로 설정합니다.

• inherit 상위 요소의 속성을 상속합니다.

Transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 기울이기 등을 할 수 있습니다.

transform: none|transform-functions;

속성 값:

• none 정의는 변환을 수행하지 않습니다.

• matrix(n,n,n,n,n,n)은 6개 값의 행렬을 사용하여 2D 변환을 정의합니다.

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16개 값의 4x4 행렬을 사용하여 3D 변환을 정의합니다.

• translate(x,y)는 2D 변환을 정의합니다.

• translate3d(x,y,z)는 3D 변환을 정의합니다.

코드 구현:

html 코드:

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="CSS에서 이미지가 회전하도록 설정하는 방법" >
</div>

회전 코드:

.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;}

구현 효과:

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS에서 이미지가 회전하도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!