Как сделать анимацию вращающейся монеты

Как сделать, чтобы логотип крутился как монета (анимация)?

Нужно сделать, чтобы логотип крутился как монета (анимация).

Вопрос задан более трёх лет назад
4381 просмотр

2 комментария

Средний 2 комментария

alex-1917

а чо ставку не пишете? за вас народ отдувается, корячится, а вы даже спасибо не говорите. чужое время стоит бабла, если вы конечно не совсем потерянный для Тостера человек.
Это задание, а не вопрос! в спам отправляю.

vilka_2009

Виолетта Морозова @vilka_2009
Пройдите курс на htmlacademy.ru по анимациям
Решения вопроса 1

snap44

Ответ написан более трёх лет назад
Нравится 16 4 комментария

Alizoda

Cosmonaut . @Alizoda Автор вопроса
Спасибо вам большое

tolfy

шикарная тема!! Мне зашло к месту как раз, спасибо

Alizoda

Cosmonaut . @Alizoda Автор вопроса
Размер логотипа 245px, как можно адаптировать?

Спасибо за пример. Сделал для своего сайта
Скажите пожалуйста.

Как сделать чтобы при повороте лого вокруг оси появлялись обратная сторона каждый поворот из разных изображений?
Что то у меня не получается.

Ответы на вопрос 2

ixon

https://codepen.io/anon/pen/XBQgKa
Используя css3 анимацию добавим к логотипу ссылку на анимацию coin, установим итерацию в 5 секунд и бесконечное повторение:
animation:coin 5s infinite;

.coin< display:block; background:url('https://2ch.hk/b/arch/2018-05-23/src/176403732/15270649403080.jpg'); background-size: 100% 100%; width:120px; height:120px; border-radius:50%; animation:coin 5s infinite; >

Добавим анимацию coin, изменив ширину до 0, затем вернём её в изначальное положение.
И сделаем отступ, чтобы анимация происходила относительно центра монеты.

@keyframes coin < 0% < width: 120px; margin-left:0px; >50% < width: 0px; margin-left:60px; >100% < width: 120px; margin-left:0px; >>

Как создать эффект (анимацию) вращения по оси Y объекта формы монеты с помощью СSS?

вращение монеты

Была задумка сделать вращение круга, который по оси Z растягивался б на 20+ px (чтобы видно было толщину, как у ребра монеты), но как только я начал выставлять элементы по оси Z, элементы стали вращаться по совсем другой траектории. Как можно получить вышеописанный эффект с помощью CSS/JS/SVG? Второй вопрос: сейчас я использую setTimeout из-за того, что мои классы немедленно присваиваются и я вижу поворот по оси Y только 1 раз из 8 загрузок страницы. Как инициализировать поворот через класс без функции setTimeout , чтобы это срабатывало с каждой загрузкой страницы?

document.addEventListener('DOMContentLoaded', function() < //document.querySelector(".side").classList.add('active'); function flipCircle(n)< setTimeout( ()=>, 50); > var sides = document.getElementsByClassName("side"); for (var i = 0; i < sides.length; i++) < flipCircle(sides[i]); >>);

@font-face < font-family: 'Digital Numbers'; font-style: normal; font-weight: 400; src: local('Digital Numbers'), url('https://fonts.cdnfonts.com/s/15953/DigitalNumbers-Regular.woff') format('woff'); >* < margin: 0; padding: 0; box-sizing: border-box; >body < width: 100vw; height: 100vh; overflow: hidden; background: #0a0a0a; >.text < position: absolute; top: 0;left: 0; width: 100%; height: 100%; overflow-wrap: break-word; word-wrap: break-word; >h1 < display: inline; font-size: 260px; line-height: 290px; margin: 0; padding: 0; animation: glow 1.5s ease-in-out infinite; font-family: 'Digital Numbers', sans-serif; >.flip < margin: calc(50vh - 250px) auto; width: 500px; height: 500px; perspective: 700px; >.container < position: relative; width: 100%; height: 100%; >.side < width: 100%; height: 100%; position: absolute; top:0;left:0; backface-visibility: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; animation: border-glow 1.5s ease-in-out infinite; border: 100px solid black; border-radius: 100%; transition: transform 30s cubic-bezier(1,.01,1,.5), border 500ms ease-in-out;; transform-style: preserve-3d; >.shuf-front < background-image: url('https://i.ibb.co/FgBcMfm/shuf-771.png'); >.shuf-back < transform: rotateY(180deg) scale(-1, 1); background-image: url('https://i.ibb.co/FgBcMfm/shuf-771.png'); >.active < transform: rotateY(calc(-2000 * 360deg)); >/*rotateX(calc(2000 * 360deg)) */ @keyframes glow < 0%,100%< text-shadow:0 0 30px red; >25% < text-shadow:0 0 50px orange; >50% < text-shadow:0 0 50px forestgreen; >75% < text-shadow:0 0 50px cyan; >> @keyframes border-glow < 0%,100%< border: 10px solid red; >25% < border: 20px solid orange; >50% < border: 10px solid forestgreen; >75% < border: 20px solid blue; >> @keyframes wobble < 0%,100%< transform:rotate3d(1,1,0,40deg); >25% < transform:rotate3d(-1,1,0,40deg); >50% < transform:rotate3d(-1,-1,0,40deg); >75% < transform:rotate3d(1,-1,0,40deg); >>

Отслеживать
highpassion
задан 5 сен 2021 в 14:28
highpassion highpassion
1,816 1 1 золотой знак 6 6 серебряных знаков 18 18 бронзовых знаков
хороший, интересный вопрос
5 сен 2021 в 14:42
@Alexandr_TT практикуюсь в CSS )))
5 сен 2021 в 14:48
5 сен 2021 в 15:54

@highpassion Замечательные, полезные ответы, пробежался по всем с (+) Вот так, хороший вопрос сгенерировал отличные ответы!

5 сен 2021 в 19:45

@highpassion При наличии нескольких сильных ответов, конфликт интересов неизбежен. Каждый считает свой ответ наилучшим. Но галочка то одна. Поэтому лучше выступать в роли самодура — Этот ответ я понимаю, он мне подходит лучше других и точка. Такое решение люди поймут. Но, на мой взгляд, сделав выбор, не стоит менять его,- перебрасывать галочку. Вот это намного обидней, чем первичный выбор. Если вам хочется как-то ещё дополнительно поблагодарить, тех кому не досталась галочка, то можно плюсануть другие сильные ответы из профиля

6 сен 2021 в 5:43

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Монетка с ребром ��

.coin < --diameter:200px; --thickness:20px; --scale:0.75; --period:5s; --gradient: linear-gradient(gold 0%, yellow 50%, gold 100%); transform-style: preserve-3d; width: var(--diameter); height: var(--diameter); animation: spin var(--period) linear infinite; >.side < position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: gold; display: flex; align-items: center; justify-content: center; color: yellow; font-size: calc(var(--diameter) * 0.6); font-weight: bold; >.head < transform: translateZ(calc(var(--thickness) / 2)); animation: flip-head var(--period) linear infinite; >.tail < transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(180deg); animation: flip-tail var(--period) linear infinite; >.edge < position: absolute; width: var(--thickness); height: 100%; transform: translateX(calc(var(--diameter) / 2)) translateZ(calc(var(--thickness) / 2)) rotateY(90deg); transform-origin: 0 0; background-color: gold; background-image: var(--gradient); >@keyframes spin < 0% < transform: rotateY(0deg) scale(var(--scale)); >100% < transform: rotateY(360deg) scale(var(--scale)); >> @keyframes flip-tail < 0% < background-image: var(--gradient); color: transparent; >50% < background-image: none; color: yellow; >100% < background-image: var(--gradient); color: transparent; >> @keyframes flip-head < 0% < background-image: none; color: yellow; >50% < background-image: var(--gradient); color: transparent; >100% < background-image: none; color: yellow; >>

В основе решения идея, реализованная в первом ответе от Andrey Fedorov — плавная анимация вращения вокруг оси Y, и пошаговая смена фона.

Однако, если смотреть на объект строго в направлении оси Z, то можно добиться иллюзии объема за счет синхронного вращения двух скругленных плоскостей и вертикального прямоугольника («ребра»), проходящего через центры кругов под углом 90 градусов. Ширина прямоугольника должна быть равна расстоянию между кругами по оси Z.

При вращении дальний от наблюдателя круг принимает цвет ребра и незаметно сливается с ним в положениях, близких к 90 и 270 градусам. Одинаковая градиентная заливка ребра и дальнего круга усиливает эффект, создавая иллюзию кривизны поверхности.

схема анимации

�� Ниже схематическая анимация с полупрозрачными элементами:

.coin < --diameter:200px; --thickness:20px; --scale:0.75; --period:5s; --gradient: linear-gradient(blue 0%, blue 100%); transform-style: preserve-3d; width: var(--diameter); height: var(--diameter); animation: spin var(--period) linear infinite; >.side < opacity:0.75; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: red; display: flex; align-items: center; justify-content: center; color: transparent; font-size: calc(var(--diameter) * 0.6); >.head < transform: translateZ(calc(var(--thickness) / 2)); animation: flip-head var(--period) linear infinite; >.tail < transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(180deg); animation: flip-tail var(--period) linear infinite; >.edge < opacity:0.75; position: absolute; width: var(--thickness); height: 100%; transform: translateX(calc(var(--diameter) / 2)) translateZ(calc(var(--thickness) / 2)) rotateY(90deg); transform-origin: 0 0; background-color: gold; background-image: var(--gradient); >@keyframes spin < 0% < transform: rotateY(0deg) scale(var(--scale)); >100% < transform: rotateY(360deg) scale(var(--scale)); >> @keyframes flip-tail < 0% < background-image: var(--gradient); color: transparent; >50% < background-image: none; color: green; >100% < background-image: var(--gradient); color: transparent; >> @keyframes flip-head < 0% < background-image: none; color: green; >50% < background-image: var(--gradient); color: transparent; >100% < background-image: none; color: green; >>

Отслеживать
ответ дан 5 сен 2021 в 17:20
Alexey Vladimirov Alexey Vladimirov
1,504 1 1 золотой знак 4 4 серебряных знака 15 15 бронзовых знаков

очень крутой результат! самый минималистичный по объему кода, думаю, вы ближе всех подошли к оптимальному решению )

5 сен 2021 в 21:28
@highpassion Ведьмаку заплатите чеканной монетой ✅
5 сен 2021 в 21:31

@AlexeyVladimirov Отличная реализация! Спасибо. В принципе решение более-менее понятно. Контейнер с тремя объектами вращается. Внутри каждого объекта свои трансформации, анимации. Но у вас наверняка были вопросы, идеи, как это всё связать в целостную картинку. Не могли бы вы поделиться в комментариях к коду, основными идеями, тонкостями решения.

6 сен 2021 в 6:43
@Alexandr_TT +1
6 сен 2021 в 7:02

@Alexey Vladimirov благодарю. Всё внимательно прочитал, понял идею. Особая благодарность за поясняющий пример. Оч. приятно встретить человека, который умеет кратко и доходчиво объяснять. Эта такая редкость в настоящее время.

6 сен 2021 в 15:01

body < display: flex; min-height: 100vh; >div < margin: auto; width: 50vh; height: 50vh; border-radius: 100%; background-color: #D1C7BB; background-size: cover; background-repeat: no-repeat; background-image: url(https://i115.fastpic.org/thumb/2021/0905/38/_94172dc7f7cefcb43a44012c6c104438.jpeg); animation: bshit 3s infinite linear; >@keyframes bshit < from < transform: rotateY(0); background-image: url(https://i115.fastpic.org/thumb/2021/0905/38/_94172dc7f7cefcb43a44012c6c104438.jpeg); >50% < background-image: url(https://i115.fastpic.org/thumb/2021/0905/35/_41069afe25725a9574235b4b84009235.jpeg); >to < transform: rotateY(360deg); >>

Отслеживать
ответ дан 5 сен 2021 в 14:43
Andrei Fedorov Andrei Fedorov
5,793 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак

окей, это не трехмерный круг, но бесконечная анимация может дать стопроцентное срабатывание, ставлю Вам плюс

5 сен 2021 в 14:44
А можно ли как-то назначить разные фоны для аверса/реверса? Орел и решку можно сделать?
5 сен 2021 в 14:47
@Leonid можно, это мало что мне дает. первоначальный вариант моего shuffie-flipper’a так и выглядел
5 сен 2021 в 14:53
@Leonid как я понимаю, для обеих сторон анимация начнется одновременно
5 сен 2021 в 14:55

А что не устраивает? Толщины нет? Что значит «не трехмерный круг»? И почему мало что дает такой вариант?

5 сен 2021 в 14:58

Решение с помощью canvas:

const canvas = document.getElementById('coin'); const ctx = canvas.getContext('2d'); const w = canvas.width = 600; const h = canvas.height = 180; const coinWidth = 8; const radius = Math.min(w,h)/3; const risk = 0.8; let pattern; let heads; let tails; let gurt; let pos1 = 0; let pos2 = coinWidth; let scale = 1; let direction = 0.01; let image = new Image(); image.src = 'https://as2.ftcdn.net/v2/jpg/02/15/57/69/500_F_215576902_nDCSvmb5QL3D6kHknzy9gorsFoBEFV8t.jpg'; image.onload = () => < let faceCanvas = document.createElement('canvas'); let fw = faceCanvas.width = radius*2 + 2; let fh = faceCanvas.height = radius*2 + 2; let context = faceCanvas.getContext('2d'); context.drawImage(image,28,13,210,210,0,0,fw,fh); tails = ctx.createPattern(faceCanvas, 'no-repeat'); context.drawImage(image,262,13,210,210,0,0,fw,fh); heads = ctx.createPattern(faceCanvas, 'no-repeat'); pattern = heads; context.fillStyle = '#efd894'; context.fillRect(0,0,fw,fh); for(let i=0; i < fh; i+=risk*2)< context.fillStyle = '#efd894'; context.fillRect(0,i,fw,risk); context.fillStyle = '#7b521c'; context.fillRect(0,i+risk,fw,risk); >gurt = ctx.createPattern(faceCanvas,'no-repeat'); ctx.strokeStyle = '#7b521c'; ctx.strokeWidth = 1; ctx.translate(w/2,h/2); draw(); > function draw()< ctx.clearRect(-w/2,-h/2,w,h); if(scale >= 1) < direction = -direction; [pos1,pos2] = [pos2,pos1]; >else if(scale ctx.save(); ctx.translate(pos1-(Math.abs(scale)*pos1),0); ctx.scale(scale,1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.translate(-radius,-radius-1); ctx.fillStyle = gurt; ctx.fill(); ctx.stroke(); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.rect(0, -radius-1, coinWidth*(1-scale), radius*2+2); ctx.translate(-radius,-radius-1); ctx.fillStyle = gurt; ctx.fill(); ctx.restore(); ctx.save(); ctx.translate(pos2-(Math.abs(scale)*pos2),0); ctx.scale(scale,1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.translate(-radius,-radius); ctx.fillStyle = pattern; ctx.fill(); ctx.stroke(); ctx.restore(); scale += direction; requestAnimationFrame(draw); >

Гифки вращающейся монеты — Подбрасывание монеты на GIF

Мы подбрасываем монету, когда не знаем, что делать. Мы хотим передать ответственность за решение в руки судьбы, и это абсолютно нормально. Лицо или решка, пусть сама природа решает. Но вращающаяся монета это также символ денег и богатства. Здесь вы найдёте анимированные гифки переворачивающихся монет в обоих смыслах. Скачайте бесплатно! Используйте на вашем ютуб-канале, в случае если кто-то пожертвовал вам.

Вращающаяся монета на анимированных изображениях

Ничего лишнего. Только одна рука, подбрасывающая монету

Толстая золотая монета вращается на фиолетовом фоне

Воин подбрасывает блестящую золотую монету. Красивое огненное небо в качестве фона

Идеальный способ подбросить монету это ударить её большим пальцем

Вращающаяся монета доллара на прозрачном фоне

Монета фунта стерлингов вращается на зелёном фоне

Имперская толстая монета

Эта монета готова для использования в любом вашем проекте. Прозрачный фон

Вращающийся золотой доллар на чёрном фоне

Сверкающая монета достоинством в один доллар на белом фоне

Переворачивание монеты, камера снимает это крупным планом

Доллар появляется и снова исчезает, прямо как в реальной жизни

Монета для видеоигры в высоком разрешении. Белый фон

Аниме девочка подбрасывает монету высоко в небо

Королевская монета вращается на белом фоне

Три бронзовые монеты со знаком доллара взлетают и вращаются, а затем они падают

Кто-то переворачивает монету и она пролетает на фоне гигантского золотого шара

Золотая монета с буквой Z. Возможно, это зенни.

Кто-то запускает вращение монеты достоинством в 100 единиц

Кофейная монета вращается на белом фоне

Свет пролился на мерило судьбы в руках героя, которого заслужил этот город

Золотой доллар на прозрачном фоне

Красивая золотая монета вращается на тёмном фоне. На лицевой и обратной стороне изображена буква D

Приветливая золотая монета на прозрачном фоне

Зелёная блестящая жаба подбрасывает серебряную монету

Вращающаяся золотая монета с буквой I на желтом фоне

Два мужчины играют в игру шанса

Музыкальная монета вращается на прозрачном фоне

Древняя монета вращается на тарелке

Невероятный уровень управления вращающейся монетой

Вращающаяся монета доллара с рамочкой. Прозрачный фон

Простейшая золотая монета на тёмном фоне

Двуликий подбрасывает монету, чтобы определить чью-то судьбу

Вращающаяся монета с изображением курицы мужского пола

Монета со знаком доллара переворачивается в падении и подъёме

Биткоин это одна из самых популярных монет в наши дни

Монета на тёмной стороне этого героя

Вращающаяся монета, на которой изображена королева Элизабет II

Чёрно-белая гифка подбрасывания древней монеты

Я сделаю то, о чём ты просишь, когда эта монета прекратит вращаться

Золотая монета в красивой огранке

Немного психоделической графики, начинающейся с монеты

Вращающийся доллар на белом фоне

Силуэт руки, подбрасывающей монету

Персонаж из видеоигры подбрасывает монету

Красивая монета из двух различных металлов

Блестящая монета в мире кошек. Прозрачный фон

Мальчик гуляет и подбрасывает монету

Кто-то не умеет подбрасывать монету

Монета взлетает и вращается на фиолетовом фоне

Серебряная монета вращается на деревянном столе

Сервис компании Google, предназначенный для переворачивания монеты онлайн

Вращающаяся монета в свободной стране. Прозрачный фон

Четверть доллара. Монета, которая находится в обращении в США

Стильно одетый парень подбрасывает монету снова и снова. Прозрачный фон

Быстро вращающаяся монета с изображением пятиконечной звезды. Прозрачный фон

Эта монета сменяет свой цвет при каждом вращении

Вращающаяся золотая мишень

Все в порядке, но.

Этот текст мало кто будет читать и мы можем написать здесь все, что угодно, например.
Вы живете в неведении. Роботы уже вторглись в нашу жизнь и быстро захватывают мир, но мы встали на светлый путь и боремся за выживание человечества. А если серьезно, то.

В целях обеспечения безопасности сайта от кибератак нам необходимо убедиться, что вы человек. Если данная страница выводится вам часто, есть вероятность, что ваш компьютер заражен или вы используете для доступа IP адрес зараженных компьютеров.

Если это ваш частный компьютер и вы пытаетесь зайти на сайт, например, из дома — мы рекомендуем вам проверить ваш компьютер на наличие вирусов.

Если вы пытаетесь зайти на сайт, например, с работы или открытых сетей — вам необходимо обратиться с системному администратору и сообщить, что о возможном заражении компьютеров в вашей сети.