CSS3에서 이미지를 회전하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS3에서 이미지를 회전하는 방법

青灯夜游

Aug 31, 2022 pm 06:35 PM

csscss3생기

CSS3에서는 애니메이션 속성과 "@keyframes" 규칙을 사용하여 이미지에 회전 애니메이션을 추가하여 이미지를 회전시킬 수 있습니다. 구현 단계: 1. "@keyframes 애니메이션 이름 {50% {transform: 회전(회전 각도);}" 문을 사용하여 회전 애니메이션을 만듭니다. 2. "그림 요소 {애니메이션: 애니메이션 이름 시간 무한;} 문을 사용합니다. " 회전에 애니메이션을 적용하려면 지정된 그림 요소에 적용하기만 하면 됩니다.

CSS3에서 이미지를 회전하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서는 애니메이션 속성과 "@keyframes" 규칙을 사용하여 이미지에 회전 애니메이션을 추가하여 이미지를 회전시킬 수 있습니다.

@keyframes는 CSS 애니메이션 동작 주기를 사용하면 간단한 애니메이션을 만들 수 있습니다.
animation(애니메이션) 속성은 다양한 CSS 애니메이션 속성을 사용하여 지정된 요소에 애니메이션을 적용하는 데 사용됩니다. 애니메이션 반복 횟수, 시작과 끝 사이의 교대 여부 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 값 및 애니메이션을 실행해야 하는지 아니면 일시 중지해야 하는지 여부입니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.

구문:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

회전 애니메이션을 정의하려면 회전 동작을 제어하려면 "@keyframes" 규칙에서 변환 속성을 사용해야 합니다.

구현 코드:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}
			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="CSS3에서 이미지를 회전하는 방법" >
	</body>
</html>

CSS3에서 이미지를 회전하는 방법

Description: animation attribute

value	Description
animation	약어 속성입니다.
animation-name	선택기에 바인딩할 키프레임의 이름을 지정합니다.
animation-duration	애니메이션은 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다
animation-timing-function	애니메이션이 한 주기를 완료하는 방법을 설정하세요
animation-delay	애니메이션이 시작되기 전 지연 간격을 설정하세요.
animation-iteration-count	는 애니메이션이 재생되는 횟수를 정의합니다.
animation-direction	애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
animation-fill-mode	는 애니메이션이 재생되지 않을 때(애니메이션이 완료되거나 애니메이션이 재생을 시작하기 전에 지연되는 경우) 요소에 적용할 스타일을 지정합니다.
animation-play-state	애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.

(동영상 공유 학습: 웹 프론트엔드 시작하기)

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?May 14, 2025 am 12:20 AM

아니요, 당신은 uplemultipleidsinthesamedom.1) idsmustbeuniqueperhtmlspecification, andusingduplicatescancauseSconsistentBrowserBehavior.2) useclassesforstylingmultipleelements, attributesectorscendats eftibutes 및 descenderfortrecture

HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities, MakingItmoredynamic, Interactive, and Accessible.1) itsupportsmultimediaelementslikeand, 2) SemanticlementsImpreveAcessibilityandCodeReardability.3) 특징적인 부대, 응답 Whebappl

HTML5의 중요한 목표 : 웹 개발 및 사용자 경험 향상May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentandusereerexperiencetroughsemanticstructure, multimediaintegration 및 performanceimprovements

html5 : 안전합니까?May 14, 2025 am 12:15 AM

html5isnotinherentlyinsecure, buttsfeaturescanleadtosecurityRiskSifMisusedOrimProperSimplemented.1) USETHETSANDTRIFICEINIFRAMESTOCONTROLEMEDEDEDENDENDENDENDENDENDENDENDENDENTANDENTANDERVULNERABILITIESLIKECLIKEJACKINGINITIONSLIKECLIKETHOING.2) 피난처에 대한 비난을 피하십시오

이전 HTML 버전과 비교할 때 HTML5 목표May 14, 2025 am 12:14 AM

html5aimedtoenhanceWebDevelopmentByIntrictionmanticalLiticalEmentements, nativeMultiMediasupport, 개선 된 정보 및 및 플린 컨테이션, html4andxhtml.1) itintructed -temantictagsiver ,, 개선 부양

CSS : ID 선택기를 사용하는 것이 좋지 않습니까?May 13, 2025 am 12:14 AM

ID 선택기를 사용하는 것은 본질적으로 CSS에서 나쁘지 않지만주의해서 사용해야합니다. 1) ID 선택기는 고유 한 요소 또는 JavaScript 후크에 적합합니다. 2) 일반적인 스타일의 경우 클래스 선택기가보다 유연하고 유지 관리 가능하므로 사용해야합니다. ID 및 클래스 사용의 균형을 유지함으로써보다 강력하고 효율적인 CSS 아키텍처를 구현할 수 있습니다.

HTML5 : 2024 년 목표May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONERFINEMENTANDENDEND 및 최적화, NOTNEWFEATURES.1) 최적화 된 렌더링을 향상시킵니다

HTML5가 개선하려고했던 주요 영역은 무엇입니까?May 13, 2025 am 12:12 AM

html5aimedtoimprovewebdevelopmentinfourkeyareas : 1) Multimediasupport, 2) Semantictructure, 3) Formcapabilities, 및 4) OfflineandStorageOptions.1) Html5intrudceDandlements, Simplifying MediaembeddingandenUsereXperxpercepence.2) NewSmanticallementalmentalmentementlementmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentalments

See all articles