YEGHRO on Nostr: Here is a quick code I whipped up for you for this animation. Just paste it into a ...
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>
<!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">
![https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png"](https://www.mariowiki.com/images/4/44/Coin_PMTTYDNS_icon.png"){kind=link}
<img src="https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"; class="back" alt="Bitcoin Logo">
![https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"](https://res.coinpaper.com/coinpaper/bitcoin_btc_logo_62c59b827e.png"){kind=link}
</div>
</div>
</body>
</html>