Как сделать, чтобы логотип крутился как монета (анимация)?
Нужно сделать, чтобы логотип крутился как монета (анимация).
- Вопрос задан более трёх лет назад
- 3791 просмотр
Средний 2 комментария
- Вконтакте
- Вконтакте
Спасибо за пример. Сделал для своего сайта
Скажите пожалуйста.
Как сделать чтобы при повороте лого вокруг оси появлялись обратная сторона каждый поворот из разных изображений?
Что то у меня не получается.
https://codepen.io/anon/pen/XBQgKa
Используя css3 анимацию добавим к логотипу ссылку на анимацию coin, установим итерацию в 5 секунд и бесконечное повторение:
animation:coin 5s infinite;
Добавим анимацию coin, изменив ширину до 0, затем вернём её в изначальное положение.
И сделаем отступ, чтобы анимация происходила относительно центра монеты.
Как создать эффект (анимацию) вращения по оси Y объекта формы монеты с помощью СSS?
Была задумка сделать вращение круга, который по оси Z растягивался б на 20+ px (чтобы видно было толщину, как у ребра монеты), но как только я начал выставлять элементы по оси Z, элементы стали вращаться по совсем другой траектории. Как можно получить вышеописанный эффект с помощью CSS/JS/SVG?
Второй вопрос: сейчас я использую setTimeout из-за того, что мои классы немедленно присваиваются и я вижу поворот по оси Y только 1 раз из 8 загрузок страницы. Как инициализировать поворот через класс без функции setTimeout , чтобы это срабатывало с каждой загрузкой страницы?
Монетка с ребром ��
В основе решения идея, реализованная в первом ответе от Andrey Fedorov — плавная анимация вращения вокруг оси Y, и пошаговая смена фона.
Однако, если смотреть на объект строго в направлении оси Z, то можно добиться иллюзии объема за счет синхронного вращения двух скругленных плоскостей и вертикального прямоугольника ("ребра"), проходящего через центры кругов под углом 90 градусов. Ширина прямоугольника должна быть равна расстоянию между кругами по оси Z.
При вращении дальний от наблюдателя круг принимает цвет ребра и незаметно сливается с ним в положениях, близких к 90 и 270 градусам. Одинаковая градиентная заливка ребра и дальнего круга усиливает эффект, создавая иллюзию кривизны поверхности.
Как сделать анимацию вращающейся монеты
Анимация: демонстрация движения монеты
Нужно разработать программный продукт, демонстрирующий движение монеты достоинством в один рубль .
Как сделать анимацию вращающейся монеты
MustLive
Просмотр профиля
pipeman
Просмотр профиля
MustLive