Hoạt hình xoay CSS3

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

Không thể có được hình ảnh hoạt hình này để làm việc, nó được cho là thực hiện xoay 360 độ.

Tôi đoán có gì đó không ổn với CSS bên dưới, vì nó chỉ đứng yên.

.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); 
        }
    }
}

Đây là một bản demo . CSS hoạt hình chính xác:

.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">

Một số lưu ý về mã của bạn:

1. Bạn đã lồng các khung hình chính bên trong .imagequy tắc và điều đó không chính xác
2. float:left sẽ không làm việc trên các yếu tố định vị tuyệt đối
3. Hãy xem caniuse : IE10 không cần -ms-tiền tố

Tôi có một hình ảnh xoay sử dụng điều tương tự như bạn:

.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);
}

Để đạt được góc xoay 360 độ, đây là Giải pháp làm việc .

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);
}

Bạn phải di chuột lên hình ảnh và bạn sẽ có được hiệu ứng xoay 360 độ.

PS: Thêm một -webkit-tiện ích mở rộng để nó hoạt động trên chrome và các trình duyệt webkit khác. Bạn có thể kiểm tra fiddle cập nhật cho webkit TẠI ĐÂY

Nếu bạn muốn lật hình ảnh, bạn có thể sử dụng nó.

.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); } }

thử cái này dễ

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-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); } } 

 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Ở đây sẽ giúp bạn

Liên kết jsfiddle dưới đây sẽ giúp bạn hiểu cách xoay hình ảnh. Tôi đã sử dụng cùng một cách để xoay mặt số của đồng hồ.

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();

Trong đó: • t: thời gian hiện tại,

• b: giá trị begInnIng,

• c: thay đổi về giá trị,

• d: thời lượng,

• x: chưa sử dụng

Không nới lỏng (nới lỏng tuyến tính): hàm (x, t, b, c, d) {return b + (t / d) * c; }