CSS3 Поворот анімації


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

Відповіді:


520

Ось демонстрація . Правильна 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. Погляньте на канюзу : IE10 не потребує -ms-префікса

13
Якщо хтось спробує це у власному коді: НЕ ЗАБУДУЙТЕ ЗАБУТИ розділ @ внизу
Джек М.

Привіт Чи можу я припинити анімацію Обертання нескінченності через 5 секунд?
доктор медичних наук Ашик

16
Я майже виплюнув воду, коли запустив анімацію.
Razgriz

" float:left won't work on absolutely positioned elements", це зменшить їх до мінімального розміру, хоча, як і на дисплеї: inline-block does
gregn3

32

У мене є обертове зображення, використовуючи те саме, що і ви:

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

1
додати: transform:rotate(360deg);для IE
Dusty

3
Будь-ласка, виберіть місцеві приклади для порушених посилань на веб-сайт.
evolutionxbox

Зараз посилання розірвано.
Маркус Бючер

30

Щоб досягти обертання на 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 градусів.

PS: Додайте -webkit-розширення для роботи з хромованими та іншими веб-браузерами. Ви можете перевірити оновлену скрипку для веб-сайту ТУТ


Fiddle не працює oO Інспектор Chrome не любить ваш CSS, зокрема "перетворення" та "властивість переходу". О Боже.
Just Plain High

1
Для цього вам потрібно додати -webkit-tranformйого для роботи. Ось оновлена ​​скрипка. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh

1
2017: Зараз це дуже добре підтримується і кращий спосіб робити нескінченні обертання. -webkit-префікс більше не потрібен і його можна безпечно видалити. Підтримка браузерів: caniuse.com/#search=transforms
Alph.Dev

2

якщо ви хочете перевернути зображення, ви можете використовувати його.

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

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


0

спробуйте це легко

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


-6

Тут це повинно вам допомогти

Нижнє посилання 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: значення begInnIng,

• c: зміна значення,

• d: тривалість,

• x: невикористаний

Без послаблення (лінійне послаблення): функція (x, t, b, c, d) {повернення b + (t / d) * c; }


2
Я б підтримав цю відповідь, якщо ви надасте трохи більше інформації (як це ви робите у скрипці). Я також вважаю , ви повинні відзначити це плагін JQuery , тому що я був , як, «я не знаю , JQuery міг би зробити це !!! ^ _ ^ дивиться на скрипку ее ... u_u»
Just Plain High

2
пояснення змінних x, t, b, c, d (як це робиться у скрипці) та чітко заявляючи, що, хоча це не рішення CSS, як вимагає ОП, це досить просте та ефективне рішення плагінів jQuery: )
Just Plain High

3
Захищений. ОП не вимагав рішення Javascript, особливо це не плагін jQuery. Дотримуйтесь того, що просять.
TheCarver
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.