CSS3 회전 애니메이션

CSS3 회전 애니메이션

---

<img class="image" src="" alt="" width="120" height="120">

이 애니메이션 이미지를 작동시킬 수 없으며 360도 회전해야합니다.

나는 여전히 머물러 있기 때문에 아래 CSS에 문제가 있다고 생각합니다.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

---

여기 데모가 있습니다. 올바른 애니메이션 CSS :

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

---

코드에 대한 참고 사항 :

1. .image규칙 안에 키 프레임을 중첩 시켰는데 , 틀 렸습니다.
2. float:left 절대적으로 배치 된 요소에서는 작동하지 않습니다
3. caniuse 살펴보기 : IE10에는 -ms-접두사 가 필요하지 않습니다.

---

나는 당신과 같은 것을 사용하여 회전하는 이미지를 가지고 있습니다 :

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

---

360도 회전을 달성하기 위해 다음은 작업 솔루션 입니다.

HTML :

<img class="image" src="your-image.png">

CSS :

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

이미지를 가리키면 360도 회전 효과가 나타납니다.

추신 : -webkit-크롬 및 기타 웹킷 브라우저에서 작동 하도록 확장 프로그램을 추가하십시오 . 당신은 웹킷에 대한 업데이트 된 바이올린을 확인할 수 있습니다 여기에

---

이미지를 뒤집으려면 사용할 수 있습니다.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }

---

여기 이것이 당신을 도울 것입니다

아래의 jsfiddle 링크는 이미지 회전 방법을 이해하는 데 도움이됩니다. 시계 다이얼을 돌리기 위해 동일한 것을 사용했습니다.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

• t : 현재 시간

• b : 시작 값,

• c : 가치 변화

• d : 기간,

• x : 미사용

여유 없음 (선형 여유) : function (x, t, b, c, d) {return b + (t / d) * c; }

참고 URL : https://stackoverflow.com/questions/16771225/css3-rotate-animation