用css實現一個硬幣旋轉的效果
阿新 • • 發佈：2021-11-14
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>銀幣旋轉效果</title> <style> #euro { width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; position: absolute; background: red; border-radius: 50%; top: 50%; left: 50%; transform-style: preserve-3d; animation: spin 2.5s linear infinite; } .back { background-image: url("/uploads/160101/backeuro.png"); width: 150px; height: 150px; background: blue; border-radius: 50%; } .middle { background-image: url("/uploads/160101/faceeuro.png"); width: 150px; height: 150px; transform: translateZ(1px); position: absolute; background: yellow; border-radius: 50%; top: 0; } .front { background-image: url("/uploads/160101/faceeuro.png"); height: 150px; position: absolute; top: 0; transform: translateZ(10px); width: 150px; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } </style> </head> <body> <div id="euro"> <div class="front" /> <div class="middle" /> <div class="back" /> </div> </body> </html>
效果如下：