CSS3 이미지 회전을 달성하는 방법은 무엇입니까? CSS3에서 이미지 회전 애니메이션 효과를 얻는 방법
- 不言원래의
- 2018-09-12 14:24:4010878검색
웹 페이지에서 사진이 회전하는 모습을 자주 볼 수 있습니다. 이러한 사진 회전은 어떻게 이루어지나요? 이 기사에서는 CSS3를 사용하여 이미지 회전 애니메이션 효과를 얻는 방법을 소개합니다.
css3에서 이미지 회전은 -webkit-animation과 @-webkit-keyframes의 조합을 사용하여 수행할 수 있습니다.
-webkit-animation은 다음과 같이 정의된 복합 속성입니다.
-webkit-animation: 이름 기간 타이밍- function Delay iteration_count Direction;
name: 애니메이션을 수행하기 위해 @-webkit-keyframes에 지정해야 하는 메서드입니다.
duration: 애니메이션 한 주기의 지속 시간입니다.
timing-function: 애니메이션 실행 효과는 선형적일 수도 있고 "빠른 속도 증가" 등이 될 수도 있습니다.
delay: 애니메이션 지연 실행 기간입니다.
iteration_count: 애니메이션 루프 실행 횟수가 무한이면 무한히 실행됩니다.
direction: 애니메이션 실행 방향.
@-webkit-keyframes 애니메이션 실행의 초기 값과 종료 값을 지정하는 및 의 두 가지 속성입니다.
-webkit-animation-play-state:paused;
이미지 회전을 구현하기 위해 CSS3에서 사용하는 속성 값을 이해한 후, 이미지 회전 애니메이션을 구현하기 위해 CSS3용 코드를 직접 살펴보겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>transform</title>
<style>
#loader {
display: block;
position: relative;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="test" >
<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />
</div>
</body>
</html>이 글은 여기에 있습니다. CSS3의 더 많은 애니메이션 속성을 보려면 css3 학습 매뉴얼을 참조하세요.
관련 권장 사항:
CSS3을 사용하여 이미지 확대 및 회전을 구현_html/css_WEB-ITnose
CSS3에서 이미지를 계속 회전시키는 방법은 무엇인가요? 【자세한 설명】
위 내용은 CSS3 이미지 회전을 달성하는 방법은 무엇입니까? CSS3에서 이미지 회전 애니메이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!