CSS3 Rotate Animation

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

Nie można uruchomić tego animowanego obrazu, powinien on obracać się o 360 stopni.

Myślę, że coś jest nie tak z CSS poniżej, ponieważ po prostu się nie porusza.

.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); 
        }
    }
}
Borsn
źródło

Odpowiedzi:

520

Oto demo . Prawidłowa animacja 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">


Kilka uwag na temat twojego kodu:

  1. Zagnieżdżiłeś klatki kluczowe w .imageregule i to jest niepoprawne
  2. float:left nie będzie działać na absolutnie pozycjonowanych elementach
  3. Spójrz na caniuse : IE10 nie potrzebuje -ms-prefiksu
Giona
źródło
13
Jeśli ktoś spróbuje tego we własnym kodzie: NIE ZAPOMNIJ o sekcji @ na dole
Jack M.
Witam Czy mogę zatrzymać animację Rotacja nieskończoności po 5s?
MD Ashik
16
Prawie wyplułem wodę, kiedy uruchomiłem animację.
Razgriz
float:left won't work on absolutely positioned elements”, zmniejszy je jednak do minimalnego rozmiaru, podobnie jak w przypadku wyświetlania: blok wbudowany
gregn3,
32

Mam obracający się obraz, używając tej samej rzeczy, co ty:

.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);
}
Ryan de Vries
źródło
1
dodaj: transform:rotate(360deg);dla IE
Dusty
3
Wybierz lokalne przykłady zamiast zepsutych linków do stron.
evolutionxbox
Link jest teraz zepsuty.
Markus Bucher,
30

Aby uzyskać obrót o 360 stopni, oto rozwiązanie robocze .

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

Musisz najechać myszką na obraz i uzyskasz efekt obrotu o 360 stopni.

PS: Dodaj -webkit-rozszerzenie, aby działało na Chrome i innych przeglądarkach webkit. Zaktualizowany skrzynkę dla webkita możesz sprawdzić TUTAJ

Nitesh
źródło
Fiddle nie działa oO Inspektor Chrome nie lubi twojego CSS-a, w szczególności „transform” i „przejście-właściwość”. O jej.
Just Plain High
1
W tym celu musisz dodać -webkit-tranform, aby działało. Oto zaktualizowane skrzypce. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: Jest to teraz bardzo dobrze obsługiwane i preferowany sposób wykonywania nieskończonych rotacji. -webkit-Prefiks nie jest już potrzebny i można go bezpiecznie usunąć. Obsługa przeglądarek: caniuse.com/#search=transforms
Alph.Dev,
2

jeśli chcesz przerzucić obraz, możesz go użyć.

.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); } }
Cześć Hades
źródło
0

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

Charles Mbogo
źródło
0

spróbuj tego łatwo

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

Omar Bakhsh
źródło
-6

To powinno ci pomóc

Poniższy link jsfiddle pomoże ci zrozumieć, jak obracać obraz. Użyłem tego samego, aby obrócić tarczę zegara.

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

Gdzie: • t: aktualny czas,

• b: wartość początkowa,

• c: zmiana wartości,

• d: czas trwania,

• x: nieużywany

Bez luzowania (liniowe): funkcja (x, t, b, c, d) {return b + (t / d) * c; }

Abhi
źródło
2
Chciałbym poprzeć tę odpowiedź, jeśli podasz nieco więcej informacji (tak jak robisz to w skrzypcach). Czuję też, że powinieneś wspomnieć, że jest to wtyczka jQuery, ponieważ mówiłem: „Nie wiedziałem, że jQuery może to zrobić !!! ^ _ ^ patrzy na skrzypce Och, czekaj ... U_U”
Just Plain High
2
wyjaśnienie zmiennych x, t, b, c, d (tak jak robisz to w skrzypcach) i jasne stwierdzenie, że chociaż nie jest to rozwiązanie CSS wymagane przez OP, jest to dość proste i skuteczne rozwiązanie wtyczki jQuery: )
Just Plain High
3
Doceniony. OP nie zażądał rozwiązania JavaScript, a zwłaszcza wtyczki jQuery. Trzymaj się tego, o co pytasz.
TheCarver