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" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!