CSS3에서 이미지를 회전하는 방법
- 青灯夜游원래의
- 2022-08-31 18:35:343495검색
CSS3에서는 애니메이션 속성과 "@keyframes" 규칙을 사용하여 이미지에 회전 애니메이션을 추가하여 이미지를 회전시킬 수 있습니다. 구현 단계: 1. "@keyframes 애니메이션 이름 {50% {transform: 회전(회전 각도);}" 문을 사용하여 회전 애니메이션을 만듭니다. 2. "그림 요소 {애니메이션: 애니메이션 이름 시간 무한;} 문을 사용합니다. " 회전에 애니메이션을 적용하려면 지정된 그림 요소에 적용하기만 하면 됩니다.
이 튜토리얼의 운영 환경: 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="img/1.jpg" style="max-width:90%" / alt="CSS3에서 이미지를 회전하는 방법" >
</body>
</html>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!