Как сделать анимацию двух картинок?

Question

[Александр Коновалов]

Здравствуйте! Как сделать анимацию двух картинок?
Например, есть две картинки, надо их вставить в круг и, чтобы этот кружок крутился на 360 градусов, с одной стороны круга одна картинка, с другой другая.

Answer 1

[Денис Инешин]

Например: https://jsfiddle.net/efyq5pzw/
https://jsfiddle.net/efyq5pzw/1/ (с картинками)

div {
    position: relative;
    width: 200px;
    height: 200px;
    background: #000;
    overflow: hidden;
    border-radius: 50%;
    animation: ROTATION 5s linear infinite;
}
div:before {
    position: absolute;
    display: block;
    content: "";
    top: 0; left: 0;
    width: 50%; height: 100%;
    background: #999;
}
div:after {
    position: absolute;
    display: block;
    content: "";
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: #f00;
}
@keyframes ROTATION {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Comments

[Александр Коновалов]

Денис Инешин Вы не поняли, у Вас 2 картинки с одной стороны, а надо по одной на сторону

[Сергей]

Александр Коновалов: он все правильно сделал ))) неверной была постановка, надо было написать "крутился на 360 градусов по оси Z"

Answer 2

[Сергей]

https://jsfiddle.net/3byu85r5/

чтобы без нажатия тупо на CSS на базе примера предыдущего оратора
https://jsfiddle.net/b4yj14d8/

на JS непрерывную анимацию делать не рекомендую

P.S. а вообще непрерывная анимация в Web - это зло

UPD: монетка с глубиной, а по факту синхронное вращение трех элементов с небольшим смещением

jsfiddle.net/awd9mLd9

Comments

[Александр Коновалов]

void01 а как сделать, чтобы крутилось без нажатия?

[Сергей]

Александр Коновалов: обновил комментарий

[Александр Коновалов]

void01: спасибо!

[Александр Коновалов]

void01: а как сделать, чтобы круг был толстый, типа, как рубль?

[Сергей]

Александр Коновалов: никак, можно сделать псевдоглубину наложив поверх еще один такой-же элемент со смещением в анимации

[Александр Коновалов]

void01: а не подскажете как?

[Сергей]

Александр Коновалов: см. третий фидл

[Александр Коновалов]

void01: угу, а где цвет меняется глубины? И я, наверно, замучил Вас своими вопросами, но как наложить еще тень, типа блики, чтобы было максимально похоже на 3D?

[Сергей]

Александр Коновалов: сделать все GIF анимацией... такой кучей анимированных стилей ты замучаешь браузер особенно мобильный. цвет в градиенте background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));

[Александр Коновалов]

void01: Понял, спасибо!