html5에서 그림을 회전시키는 애니메이션 효과 구현 방법 소개

1. 먼저 효과를 살펴보겠습니다.

2. 코드는 다음과 같습니다.

<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }

사용된 사진은 다음과 같습니다. (흰색 회전 사진입니다.)

위 내용은 html5에서 그림을 회전시키는 애니메이션 효과 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!