CSS3 이미지 회전을 달성하는 방법은 무엇입니까? CSS3에서 이미지 회전 애니메이션 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 이미지 회전을 달성하는 방법은 무엇입니까? CSS3에서 이미지 회전 애니메이션 효과를 얻는 방법

不言

Sep 12, 2018 pm 02:24 PM

css3그림 회전

웹 페이지에서 사진이 회전하는 모습을 자주 볼 수 있습니다. 이러한 사진 회전은 어떻게 이루어지나요? 이 기사에서는 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="/static/imghwm/default1.png"  data-src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg"  class="lazy"     style="max-width:90%" id="loader" / alt="CSS3 이미지 회전을 달성하는 방법은 무엇입니까? CSS3에서 이미지 회전 애니메이션 효과를 얻는 방법" >  
  </div>
 </body>
</html>

이 글은 여기에 있습니다. CSS3의 더 많은 애니메이션 속성을 보려면 css3 학습 매뉴얼을 참조하세요.

관련 기사