CSS에서 요소가 항상 회전하도록 설정하는 방법

Css에서 요소가 계속 회전하도록 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img를 사용하여 이미지를 가져옵니다. 마지막으로 CSS 스타일 "transform:rotate(360deg)"를 사용하여 요소를 360도 회전하도록 설정합니다. 도, animation-duration 속성을 통해 애니메이션 지속 시간을 설정합니다.

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

웹 페이지를 디자인할 때 이미지 표시와 관련된 다양한 문제에 자주 직면합니다. 예를 들어 일부 이미지를 표시해야 합니다. 둥근 모서리가 있는 경우 그림을 클릭하면 디스플레이 및 기타 효과가 확대됩니다.

이미지의 자동 순환 360 회전을 구현하기 위해 CSS3를 사용하는 구체적인 방법을 주로 소개합니다.

css는 변환 속성을 사용하여 요소를 회전, 크기 조정, 이동 또는 기울이도록 설정할 수 있습니다.

CSS 스타일 변환:회전(360deg)을 사용하여 요소가 360도 회전하도록 설정할 수 있습니다.

애니메이션을 사용하여 애니메이션 속성을 설정할 수 있습니다. 애니메이션 기간은 animation-duration 속성을 통해 설정할 수 있습니다.

css3은 요소의 CSS 스타일을 변환:회전(360deg)으로 설정하여 요소의 회전 각도를 360도로 설정한 다음 animation-duration 속성을 통해 애니메이션 지속 시간을 설정하여 요소의 지속적인 회전을 달성할 수 있습니다.

예:

HTML 코드:

<div class="demo">
<img  class="an img lazy"  src="/static/imghwm/default1.png"  data-src="1.jpg"       style="max-width:90%"  style="max-width:90%"/ alt="CSS에서 요소가 항상 회전하도록 설정하는 방법" >

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: 200px;}

렌더링:

추천 학습: "css 비디오 튜토리얼"

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