CSS로 이미지를 회전하는 방법

CSS를 사용하여 이미지를 회전하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img 태그를 통해 이미지를 소개합니다. 마지막으로 img 이미지에 변환 및 애니메이션 스타일 속성을 추가하여 이미지 회전 효과를 얻습니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

img 이미지에 변환 및 애니메이션 스타일 속성을 추가하여 이미지 회전 효과를 얻을 수 있습니다.

예:

HTML 코드:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

css 코드:

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

img 이미지에 변형 및 애니메이션 스타일 속성을 추가하여 360도 회전 애니메이션 효과를 구현했습니다.

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

transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. Rotate() 메서드를 사용하면 요소가 지정된 각도만큼 시계 방향으로 회전됩니다. 음수 값이 허용되며 요소는 시계 반대 방향으로 회전됩니다.

animation 속성은 6개의 애니메이션 속성을 설정하기 위한 약식 속성입니다.

animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다.

animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

animation-timing-function은 애니메이션의 속도 곡선을 지정합니다.

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

animation-iteration-count는 애니메이션을 재생해야 하는 횟수를 지정합니다.

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

【추천 학습: css 동영상 튜토리얼】

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