Here is a quick code I whipped up for you for this animation. Just paste it into a text file and name it whatever.html and run it to see the animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coin Flip Animation</title>
<style>
.coin-container {
width: 100px;
height: 100px;
position: relative;
perspective: 500px;
}
.coin {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: flip 2s infinite linear;
}
.coin img {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
@keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(0deg); }
}
</style>
</head>
<body>
<div class="coin-container">
<div class="coin">
<img src="https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png"; class="front" alt="Mario Coin">
<img src="https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"; class="back" alt="Bitcoin Logo">
</div>
</div>
</body>
</html>
YEGHRO
npub1lq…scejr
2025-02-18 21:29:24
in reply to nevent1q…npxw
![https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png"](https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png"){kind=link}
![https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"](https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"){kind=link}
Author Public Key
npub1lqs30x7466guvx6r2cek8z9d4hpucycy7j08wx58cwx70m206q3qrscejrPublished at
2025-02-18 21:29:24Event JSON
{
"id": "53a4e827d21a7b8daaf1143fd7fba5770eb6c0e872e111542bba5951efc4851d",
"pubkey": "f821179bd5d691c61b4356336388adadc3cc1304f49e771a87c38de7ed4fd022",
"created_at": 1739914164,
"kind": 1,
"tags": [
[
"e",
"61bb43f40a41695777e76b67fd6044624e73ee673940e4e6f1698390f53d9709",
"wss://bitcoiner.social",
"root"
],
[
"p",
"a3a7221429350db2b95b9032225da85ddd1592a46ee73eed7bbb13b17ca63e21"
],
[
"r",
"wss://hist.nostr.land/"
],
[
"r",
"wss://purplepag.es/"
],
[
"r",
"wss://relay.damus.io/"
],
[
"r",
"wss://relay.fountain.fm/"
],
[
"r",
"wss://relay.primal.net/"
],
[
"r",
"wss://nostrelay.yeghro.com/"
],
[
"r",
"wss://relay.nostr.band/"
]
],
"content": "Here is a quick code I whipped up for you for this animation. Just paste it into a text file and name it whatever.html and run it to see the animation:\n\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eCoin Flip Animation\u003c/title\u003e\n \u003cstyle\u003e\n .coin-container {\n width: 100px;\n height: 100px;\n position: relative;\n perspective: 500px;\n }\n\n .coin {\n width: 100%;\n height: 100%;\n position: absolute;\n transform-style: preserve-3d;\n animation: flip 2s infinite linear;\n }\n\n .coin img {\n width: 100%;\n height: 100%;\n position: absolute;\n backface-visibility: hidden;\n }\n\n .front {\n transform: rotateY(0deg);\n }\n\n .back {\n transform: rotateY(180deg);\n }\n\n @keyframes flip {\n 0% { transform: rotateY(0deg); }\n 50% { transform: rotateY(180deg); }\n 100% { transform: rotateY(0deg); }\n }\n \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n \u003cdiv class=\"coin-container\"\u003e\n \u003cdiv class=\"coin\"\u003e\n \u003cimg src=\"https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png\" class=\"front\" alt=\"Mario Coin\"\u003e\n \u003cimg src=\"https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png\" class=\"back\" alt=\"Bitcoin Logo\"\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n",
"sig": "82b345537846c4ae5c04bb62fc0e2bdfba97c46fe5e611a3c28a12b2902be56da25322d8b59a28b6a76312edefc8d03cb8db87e721f4e61ad3fe085e62da2519"
}